<script lang="ts">
	import type { CalendarDate, DateValue } from '@internationalized/date';
	import Calendar from '$lib/components/ui/calendar/calendar.svelte';

	let {
		date,
		placeholder,
		minValue,
		maxValue,
		isDateUnavailable,
		onchange,
		onPlaceholderChange
	}: {
		date: CalendarDate | undefined;
		placeholder: CalendarDate;
		minValue: CalendarDate;
		maxValue: CalendarDate;
		isDateUnavailable: (date: DateValue) => boolean;
		onchange?: (date: CalendarDate | undefined) => void;
		onPlaceholderChange?: (date: CalendarDate) => void;
	} = $props();
</script>

<div class="flex items-center justify-center p-6">
	<Calendar
		type="single"
		bind:value={date}
		bind:placeholder
		{isDateUnavailable}
		class="bg-transparent p-0 [--cell-size:--spacing(10)] data-unavailable:line-through data-unavailable:opacity-100 md:[--cell-size:--spacing(12)] [&_[data-outside-month]]:pointer-events-none [&_[data-outside-month]]:opacity-0"
		weekdayFormat="short"
		{minValue}
		{maxValue}
		locale="en-GB"
		onValueChange={(v: DateValue | undefined) => {
			if (onchange) {
				onchange(v as CalendarDate | undefined);
			}
		}}
		onPlaceholderChange={(p: DateValue) => {
			if (onPlaceholderChange) {
				onPlaceholderChange(p as CalendarDate);
			}
		}}
	/>
</div>
