<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import UsersIcon from "~icons/solar/users-group-rounded-broken";
	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";
	import type { FullOrderModel } from "$lib/domains/order/data/entities";
	import { capitalize } from "$lib/core/string.utils";

	let { order }: { order: FullOrderModel } = $props();

	const cardStyle =
		"flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 shadow-md";
</script>

<div class="flex flex-col gap-6">
	<!-- Passenger Information -->
	<div class={cardStyle}>
		<div class="flex items-center gap-2">
			<Icon icon={UsersIcon} cls="w-5 h-5" />
			<Title size="h5" color="black">Passengers</Title>
		</div>

		{#each order.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.middleName}
								{passenger.passengerPii.lastName}
							</p>
						</div>
						<div>
							<span class="text-gray-500">Nationality</span>
							<p class="font-medium">
								{capitalize(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 Info -->
				<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
								>{passenger.bagSelection.personalBags}x 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 Info -->
				{#if passenger.seatSelection.seatNumber}
					<div class="flex items-center gap-2 text-sm">
						<Icon icon={SeatIcon} cls="h-5 w-5 text-gray-600" />
						<span>Seat {passenger.seatSelection.seatNumber}</span>
					</div>
				{/if}
			</div>

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