<script lang="ts">
	import { ArrowRight, Plane } from "@lucide/svelte";
	import Card from "$lib/components/ui/card/card.svelte";
	import CardContent from "$lib/components/ui/card/card-content.svelte";

	let { deals } = $props();
</script>

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
	{#each deals as deal}
		<Card class="card-hover overflow-hidden">
			<CardContent class="p-5">
				{#if deal.tag}
					<div class="mb-3">
						<span
							class="rounded-full bg-brand-500 px-3 py-1 text-xs font-medium text-white"
						>
							{deal.tag}
						</span>
					</div>
				{/if}

				<div class="mb-3 flex items-center justify-between">
					<div class="flex items-center">
						<Plane class="mr-2 h-5 w-5 text-brand-500" />
						<span class="font-medium">{deal.airline}</span>
					</div>

					{#if deal.discount}
						<span
							class="rounded bg-brand-100 px-2 py-1 text-xs font-medium text-brand-600"
						>
							{deal.discount}% OFF
						</span>
					{/if}
				</div>

				<div class="mb-4 flex items-center justify-between">
					<div>
						<p class="text-xl font-bold">{deal.from}</p>
						<p class="text-sm text-muted-foreground">Departure</p>
					</div>

					<div class="flex-1 px-4">
						<div class="relative">
							<div
								class="absolute left-0 right-0 top-1/2 -translate-y-1/2 transform border-t border-dashed border-gray-300"
							></div>
							<div
								class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform bg-white p-1"
							>
								<ArrowRight class="h-4 w-4 text-brand-500" />
							</div>
						</div>
					</div>

					<div class="text-right">
						<p class="text-xl font-bold">{deal.to}</p>
						<p class="text-sm text-muted-foreground">Arrival</p>
					</div>
				</div>

				<div class="flex items-end justify-between">
					<div>
						<p class="text-sm text-muted-foreground">{deal.date}</p>
					</div>
					<div>
						<p class="text-sm">from</p>
						<p class="text-2xl font-bold text-brand-600">
							${deal.price}
						</p>
					</div>
				</div>
			</CardContent>
		</Card>
	{/each}
</div>
