<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import { Badge } from "$lib/components/ui/badge/index.js";
	import { Plane } from "@lucide/svelte";

	interface Props {
		departure: string;
		destination: string;
		durationSeconds: number;
		departureTime: string;
		arrivalTime: string;
		departureDate: string;
		arrivalDate: string;
		airlineName?: string;
		stops?: number;
	}
	let {
		departure,
		destination,
		durationSeconds,
		airlineName,
		stops,
		departureDate,
		departureTime,
		arrivalDate,
		arrivalTime,
	}: Props = $props();

	const dH = Math.floor(durationSeconds / 3600);
	const dM = Math.floor((durationSeconds % 3600) / 60);
	const durationFormatted = `${dH}h ${dM}m`;
</script>

<div class="flex w-full flex-col gap-4 p-2">
	<div class="flex w-full items-start justify-between gap-4">
		<div class="flex flex-col items-start text-start">
			<Title color="black" size="h5">{departure}</Title>
			<Title color="black" size="p" weight="normal">
				{departureTime}
			</Title>
			<span class="text-xs text-gray-500 sm:text-sm">{departureDate}</span>
		</div>

		<div class="flex flex-col items-center gap-2 pt-2">
			<div class="flex items-center gap-2">
				<div class="h-2 w-2 rounded-full bg-gray-400"></div>
				<div class="relative">
					<div class="w-20 border-t-2 border-gray-300 md:w-40"></div>
					<Plane
						class="absolute -top-[10px] left-1/2 -translate-x-1/2 transform text-primary"
						size={20}
					/>
				</div>
				<div class="h-2 w-2 rounded-full bg-gray-400"></div>
			</div>

			<span class="text-sm font-medium text-gray-600">
				{durationFormatted}
			</span>

			<div class="flex flex-col items-center gap-1">
				{#if stops !== undefined}
					<Badge
						variant={stops > 0 ? "secondary" : "outline"}
						class="font-medium"
					>
						{#if stops > 0}
							{stops} {stops === 1 ? "Stop" : "Stops"}
						{:else}
							Direct Flight
						{/if}
					</Badge>
				{/if}
				{#if airlineName}
					<span class="text-xs text-gray-500">{airlineName}</span>
				{/if}
			</div>
		</div>

		<div class="flex flex-col items-end text-end">
			<Title color="black" size="h5">{destination}</Title>
			<Title color="black" size="p" weight="normal">
				{arrivalTime}
			</Title>
			<span class="text-xs text-gray-500 sm:text-sm">{arrivalDate}</span>
		</div>
	</div>
</div>
