<script lang="ts">
	import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import { capitalize } from "$lib/core/string.utils";
	import BackpackIcon from "~icons/solar/backpack-linear";
	import BagIcon from "~icons/lucide/briefcase";
	import SuitcaseIcon from "~icons/bi/suitcase2";
	import SeatIcon from "~icons/solar/armchair-2-linear";
</script>

<div class="flex flex-col gap-6">
	{#each passengerInfoVM.passengerInfos as passenger, index}
		<div class="flex flex-col gap-4">
			<div class="flex items-center justify-between">
				<span class="font-semibold">
					Passenger {index + 1} ({capitalize(passenger.passengerType)})
				</span>
			</div>

			<!-- Personal Info -->
			<div class="rounded-lg border bg-gray-50 p-4">
				<div class="grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
					<div>
						<span class="text-gray-500">Name</span>
						<p class="font-medium">
							{passenger.passengerPii.firstName}
							{passenger.passengerPii.lastName}
						</p>
					</div>
					<div>
						<span class="text-gray-500">Nationality</span>
						<p class="font-medium">
							{passenger.passengerPii.nationality}
						</p>
					</div>
					<div>
						<span class="text-gray-500">Date of Birth</span>
						<p class="font-medium">{passenger.passengerPii.dob}</p>
					</div>
				</div>
			</div>

			<!-- Baggage Selection -->
			<div class="flex flex-wrap gap-4 text-sm">
				{#if passenger.bagSelection.personalBags > 0}
					<div class="flex items-center gap-2">
						<Icon icon={BackpackIcon} cls="h-5 w-5 text-gray-600" />
						<span>Personal Item</span>
					</div>
				{/if}
				{#if passenger.bagSelection.handBags > 0}
					<div class="flex items-center gap-2">
						<Icon icon={SuitcaseIcon} cls="h-5 w-5 text-gray-600" />
						<span>{passenger.bagSelection.handBags} x Cabin Bag</span>
					</div>
				{/if}
				{#if passenger.bagSelection.checkedBags > 0}
					<div class="flex items-center gap-2">
						<Icon icon={BagIcon} cls="h-5 w-5 text-gray-600" />
						<span>
							{passenger.bagSelection.checkedBags} x Checked Bag
						</span>
					</div>
				{/if}
			</div>

			<!-- Seat Selection -->
			{#if passenger.seatSelection.number}
				<div class="flex items-center gap-2 text-sm">
					<Icon icon={SeatIcon} cls="h-5 w-5 text-gray-600" />
					<span>Seat {passenger.seatSelection.number}</span>
				</div>
			{/if}
		</div>

		{#if index < passengerInfoVM.passengerInfos.length - 1}
			<div class="border-b border-dashed"></div>
		{/if}
	{/each}
</div>
