<script lang="ts">
	import CInfoCard from "$lib/domains/customerinfo/view/cinfo-card.svelte";
	import type { PaymentInfo } from "@pkg/logic/domains/paymentinfo/data/entities";
	import CreditCardIcon from "~icons/solar/card-broken";

	let {
		paymentInfo,
	}: {
		paymentInfo: PaymentInfo;
	} = $props();

	function maskCardNumber(cardNumber: string): string {
		const cleaned = cardNumber.replace(/\s/g, "");
		const lastFour = cleaned.slice(-4);
		return `•••• •••• •••• ${lastFour}`;
	}

	function maskCVV(cvv: string): string {
		return "•".repeat(cvv.length);
	}
</script>

<CInfoCard icon={CreditCardIcon} title="Billing Information">
	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
		<div class="md:col-span-2">
			<span class="text-xs text-gray-500">Cardholder Name</span>
			<p class="font-medium">{paymentInfo.cardholderName}</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">Card Number</span>
			<p class="font-mono text-sm tracking-wider">
				{maskCardNumber(paymentInfo.cardNumber)}
			</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">Expiry Date</span>
			<p class="font-mono">{paymentInfo.expiry}</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">CVV</span>
			<p class="font-mono">{maskCVV(paymentInfo.cvv)}</p>
		</div>
	</div>
</CInfoCard>
