<script lang="ts">
	import StatusBadge from "./StatusBadge.svelte";

	interface Props {
		name: string;
		slug: string;
		status: string;
		startDate: string | null;
		endDate: string | null;
		color: string | null;
		venueName: string | null;
		href: string;
		compact?: boolean;
	}

	let {
		name,
		slug,
		status,
		startDate,
		endDate,
		color,
		venueName,
		href,
		compact = false,
	}: Props = $props();

	function formatDate(dateStr: string | null): string {
		if (!dateStr) return "";
		return new Date(dateStr).toLocaleDateString(undefined, {
			month: "short",
			day: "numeric",
		});
	}
</script>

{#if compact}
	<!-- Compact variant: single row for lists/sidebars -->
	<a
		{href}
		class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-dark/50 transition-colors group"
	>
		<div
			class="w-2.5 h-2.5 rounded-full shrink-0"
			style="background-color: {color || '#00A3E0'}"
		></div>
		<div class="flex-1 min-w-0">
			<p
				class="text-body-sm text-white group-hover:text-primary transition-colors truncate"
			>
				{name}
			</p>
			<div class="flex items-center gap-2 mt-0.5">
				{#if startDate}
					<span class="text-[11px] text-light/40"
						>{formatDate(startDate)}{endDate
							? ` — ${formatDate(endDate)}`
							: ""}</span
					>
				{/if}
				{#if venueName}
					<span class="text-[11px] text-light/30"
						>· {venueName}</span
					>
				{/if}
			</div>
		</div>
		<StatusBadge {status} />
	</a>
{:else}
	<!-- Full card variant: for grid layouts -->
	<a
		{href}
		class="group bg-dark/30 hover:bg-dark/60 border border-light/5 hover:border-light/10 rounded-2xl p-5 flex flex-col gap-3 transition-all"
	>
		<div class="flex items-center justify-between">
			<div class="flex items-center gap-2">
				<div
					class="w-3 h-3 rounded-full"
					style="background-color: {color || '#00A3E0'}"
				></div>
				<h3
					class="text-body font-heading text-white group-hover:text-primary transition-colors truncate"
				>
					{name}
				</h3>
			</div>
			<StatusBadge {status} />
		</div>

		<div class="flex items-center gap-3 text-[12px] text-light/40">
			{#if startDate}
				<span class="flex items-center gap-1">
					<span
						class="material-symbols-rounded"
						style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
						>calendar_today</span
					>
					{formatDate(startDate)}{endDate
						? ` — ${formatDate(endDate)}`
						: ""}
				</span>
			{/if}
			{#if venueName}
				<span class="flex items-center gap-1">
					<span
						class="material-symbols-rounded"
						style="font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;"
						>location_on</span
					>
					{venueName}
				</span>
			{/if}
		</div>
	</a>
{/if}
