<script lang="ts">
	import Badge from '$lib/components/ui/Badge.svelte';
	import type { MatchListItem } from '$lib/types';

	interface Props {
		match: MatchListItem;
	}

	let { match }: Props = $props();

	const formattedDate = new Date(match.date).toLocaleString('en-US', {
		month: 'short',
		day: 'numeric',
		hour: '2-digit',
		minute: '2-digit'
	});

	const mapName = match.map.replace('de_', '').toUpperCase();
</script>

<a href={`/match/${match.match_id}`} class="block transition-transform hover:scale-[1.02]">
	<div
		class="overflow-hidden rounded-lg border border-base-300 bg-base-100 shadow-md transition-shadow hover:shadow-xl"
	>
		<!-- Map Header -->
		<div class="relative h-32 bg-gradient-to-br from-base-300 to-base-200">
			<div class="absolute inset-0 flex items-center justify-center">
				<span class="text-5xl font-bold text-base-content/10">{mapName}</span>
			</div>
			<div class="absolute bottom-3 left-3">
				<Badge variant="default">{match.map}</Badge>
			</div>
			{#if match.demo_parsed}
				<div class="absolute right-3 top-3">
					<Badge variant="success" size="sm">Parsed</Badge>
				</div>
			{/if}
		</div>

		<!-- Match Info -->
		<div class="p-4">
			<!-- Score -->
			<div class="mb-3 flex items-center justify-center gap-3">
				<span class="font-mono text-2xl font-bold text-terrorist">{match.score_team_a}</span>
				<span class="text-base-content/40">-</span>
				<span class="font-mono text-2xl font-bold text-ct">{match.score_team_b}</span>
			</div>

			<!-- Meta -->
			<div class="flex items-center justify-between text-sm text-base-content/60">
				<span>{formattedDate}</span>
				{#if match.duration}
					<span>{Math.floor(match.duration / 60)}m</span>
				{/if}
			</div>

			<!-- Result Badge -->
			<div class="mt-3 flex justify-center">
				{#if match.match_result === 0}
					<Badge variant="warning" size="sm">Tie</Badge>
				{:else if match.match_result === 1}
					<Badge variant="success" size="sm">Team A Win</Badge>
				{:else if match.match_result === 2}
					<Badge variant="error" size="sm">Team B Win</Badge>
				{/if}
			</div>
		</div>
	</div>
</a>
