<script setup lang="ts">
import { calendarPageToc } from '~/shared/examples/calendar/page-toc';
import { examples } from '~/shared/examples/calendar/usage-examples';

usePageMeta({
	title: 'componentDocs.calendar.metaTitle',
	description: 'componentDocs.calendar.description',
});

const { locale } = useI18n();
const { setToc } = usePageToc();

onMounted(() => setToc(calendarPageToc));

const date = ref<string | null>(null);
const range = ref<{ from: string; to: string } | null>(null);
</script>

<template>
	<header class="space-y-3">
		<h1 class="text-4xl font-semibold">{{ $t('component.calendar') }}</h1>
		<p class="max-w-2xl text-lg leading-8 text-muted-foreground">
			{{ $t('componentDocs.calendar.description') }}
		</p>
	</header>

	<section id="installation" class="space-y-5">
		<h2 class="text-2xl font-semibold">
			{{ $t('docsSections.installation') }}
		</h2>
		<InstallCommandBlock component="calendar" />
	</section>

	<section id="day" class="space-y-5">
		<h2 class="text-2xl font-semibold">{{ $t('docsSections.day') }}</h2>
		<ExampleBlock :code="examples.day">
			<div class="w-full max-w-sm">
				<Calendar
					v-model="date"
					:label="$t('calendarLabels.date')"
					:locale="locale"
					date-format="dd.mm.yyyy"
				/>
			</div>
		</ExampleBlock>
	</section>

	<section id="range" class="space-y-5">
		<h2 class="text-2xl font-semibold">{{ $t('docsSections.range') }}</h2>
		<ExampleBlock :code="examples.range">
			<div class="w-full max-w-sm">
				<Calendar
					v-model="range"
					:label="$t('calendarLabels.period')"
					mode="range"
					:locale="locale"
				/>
			</div>
		</ExampleBlock>
	</section>
</template>
