<script lang="ts">
	interface Props {
		date: string;
		label: string;
		onPrev: () => void;
		onNext: () => void;
		isToday: boolean;
		onDateClick?: () => void;
	}

	let { date, label, onPrev, onNext, isToday, onDateClick }: Props = $props();
</script>

<div class="flex items-center justify-between">
	<button
		onclick={onPrev}
		class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 transition-colors"
		aria-label="Previous day"
	>
		<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
		</svg>
	</button>

	<button
		onclick={onDateClick}
		class="text-center {onDateClick ? 'hover:opacity-70 transition-opacity' : 'cursor-default'}"
	>
		<span class="font-semibold text-lg">{label}</span>
		{#if !isToday}
			<p class="text-xs text-zinc-500">{date}</p>
		{/if}
	</button>

	<button
		onclick={onNext}
		disabled={isToday}
		class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-zinc-800 disabled:opacity-30 transition-colors"
		aria-label="Next day"
	>
		<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
		</svg>
	</button>
</div>
