<script lang="ts">
	import BackpackIcon from "~icons/solar/backpack-broken";
	import BagCheckIcon from "~icons/solar/suitcase-broken";
	import PersonalBagIcon from "~icons/solar/bag-broken";
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import type { FlightTicket } from "../../data/entities";

	let { data }: { data: FlightTicket } = $props();
</script>

{#if data}
	<Title size="h5" color="black">Baggage Info</Title>
	<div class="flex flex-col gap-4">
		<!-- Personal Item - Always show -->
		<div class="flex items-center justify-between gap-2">
			<div class="flex items-center gap-2">
				<Icon icon={PersonalBagIcon} cls="w-6 h-6" />
				<span>Personal Item</span>
			</div>
			<span>{data.bagsInfo.includedPersonalBags} included</span>
		</div>

		<!-- Cabin Baggage - Always show -->
		<div class="flex items-center justify-between gap-2">
			<div class="flex items-center gap-2">
				<Icon icon={BackpackIcon} cls="w-6 h-6" />
				<span>Cabin Baggage</span>
			</div>
			{#if data.bagsInfo.hasHandBagsSupport}
				<span>{data.bagsInfo.includedHandBags} included</span>
			{:else}
				<span class="text-gray-500">Not available</span>
			{/if}
		</div>

		<!-- Checked Baggage - Always show -->
		<div class="flex items-center justify-between gap-2">
			<div class="flex items-center gap-2">
				<Icon icon={BagCheckIcon} cls="w-6 h-6" />
				<span>Checked Baggage</span>
			</div>
			{#if data.bagsInfo.hasCheckedBagsSupport}
				<span>{data.bagsInfo.includedCheckedBags} included</span>
			{:else}
				<span class="text-gray-500">Not available</span>
			{/if}
		</div>
	</div>
{/if}
