<script lang="ts">
	import UserIcon from "~icons/solar/user-broken";
	import type { CustomerInfoModel } from "../data";
	import CInfoCard from "./cinfo-card.svelte";

	let {
		customerInfo,
	}: {
		customerInfo: CustomerInfoModel;
	} = $props();
</script>

<CInfoCard icon={UserIcon} title="Customer Information">
	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
		<div>
			<span class="text-xs text-gray-500">Full Name</span>
			<p class="mt-1 font-medium">
				{customerInfo.firstName}
				{#if customerInfo.middleName}
					{customerInfo.middleName}
				{/if}
				{customerInfo.lastName}
			</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">Email</span>
			<p class="mt-1">{customerInfo.email}</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">Phone Number</span>
			<p class="mt-1">
				{customerInfo.phoneCountryCode}
				{customerInfo.phoneNumber}
			</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">City</span>
			<p class="mt-1">{customerInfo.city}</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">State</span>
			<p class="mt-1">{customerInfo.state}</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">Country</span>
			<p class="mt-1">{customerInfo.country}</p>
		</div>
		<div>
			<span class="text-xs text-gray-500">Zip Code</span>
			<p class="mt-1">{customerInfo.zipCode}</p>
		</div>
		<div class="md:col-span-2">
			<span class="text-xs text-gray-500">Address</span>
			<p class="mt-1">{customerInfo.address}</p>
			{#if customerInfo.address2}
				<p class="mt-1 text-sm text-gray-600">{customerInfo.address2}</p>
			{/if}
		</div>
	</div>
</CInfoCard>
