<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import { convertAndFormatCurrency } from "$lib/domains/currency/view/currency.vm.svelte";
	import { type FlightTicket } from "../../data/entities";
	import BaggageInfo from "./baggage-info.svelte";
	import TripDetails from "./trip-details.svelte";

	let {
		data,
		hideCheckoutBtn,
		onCheckoutBtnClick,
	}: {
		data: FlightTicket;
		onCheckoutBtnClick: (tid: number) => void;
		hideCheckoutBtn?: boolean;
	} = $props();
</script>

<TripDetails {data} />

<BaggageInfo {data} />

{#if !hideCheckoutBtn}
	<div class="mt-4 flex items-center justify-end gap-4">
		<Title center size="h5" color="black">
			{convertAndFormatCurrency(data.priceDetails.displayPrice)}
		</Title>
		<Button onclick={() => onCheckoutBtnClick(data.id)}>Checkout</Button>
	</div>
{/if}
