<CwCalendar
	onDateClick={(date) => console.log(date)}
/>

<script lang="ts">
	let visibleYear = $state(new Date().getFullYear());
	let visibleMonth = $state(new Date().getMonth());
	let lastMonth = $state(new Date(visibleYear, visibleMonth, 1));

	const minDate = new Date(2026, 2, 10);
	const maxDate = new Date(2026, 4, 22);

	function handleMonthChange(_year: number, _month: number, displayedMonth: Date) {
		lastMonth = displayedMonth;
	}
</script>

<CwCalendar
	bind:year={visibleYear}
	bind:month={visibleMonth}
	{minDate}
	{maxDate}
	onMonthChange={handleMonthChange}
	onDateClick={(date) => console.log(date)}
/>

<p>
	Showing
	{lastMonth.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
</p>

<script lang="ts">
	function weatherFor(date: Date) {
		const icons = ['☀️', '🌤️', '⛅', '🌧️', '🌦️', '☁️', '🌤️'];
		return { icon: icons[date.getDay()], high: 70 + (date.getDay() % 4) };
	}

	function jobsFor(date: Date) {
		return date.getDay() === 2
			? ['Irrigation schedule', 'Nutrient audit']
			: [];
	}
</script>

<CwCalendar onDateClick={(date) => console.log(date)}>
	{#snippet dayHeader(date)}
		<span>{jobsFor(date)[0] ?? 'Open day'}</span>
	{/snippet}

	{#snippet dayTrailing(date)}
		{@const weather = weatherFor(date)}
		<div style="display:grid;justify-items:end;gap:0.1rem">
			<span style="font-size:1.2rem">{weather.icon}</span>
			<span>{weather.high}°</span>
		</div>
	{/snippet}

	{#snippet dayContent(date)}
		{#each jobsFor(date) as job}
			<div>{job}</div>
		{/each}
	{/snippet}
</CwCalendar>