<script lang="ts">
	import * as Dialog from "$lib/components/ui/dialog/index.js";
	import type { FlightTicket } from "../../data/entities";
	import TicketDetails from "./ticket-details.svelte";

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

<Dialog.Root>
	{@render children()}

	<Dialog.Content class="w-full max-w-2xl">
		<div class="flex max-h-[80vh] w-full flex-col gap-4 overflow-y-auto">
			<TicketDetails {data} {hideCheckoutBtn} {onCheckoutBtnClick} />
		</div>
	</Dialog.Content>
</Dialog.Root>
