Month and year selection

<!--
  АДАПТАЦИЯ (docs/PORTING.md §4a/§5): оригинал подменяет внутренний
  `react-day-picker`-компонент `Dropdown` на `Select` через проп
  `components` (единый `Dropdown` перехватывает и месяц, и год при
  `captionLayout="dropdown"`). У `reka-ui` `CalendarRoot` нет аналога
  подмены внутренних частей caption — вместо этого используется
  именованный слот `#caption` `CCalendar` с теми же двумя `Select`
  (закрытое состояние; открытые попапы `Select` нигде в порте не
  сравниваются попиксельно, см. PORTING.md §5 `ui-select`). Месяц
  зафиксирован явно, реальной навигации через триггеры не выполняет —
  за пределами области визуального кейса.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Card, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar as CCalendar } from "@/components/ui/calendar"

const fixedMonth = new Date(2026, 0, 15)
const date = ref<Date | undefined>(fixedMonth)

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
]
const years = [2024, 2025, 2026, 2027, 2028]
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <CCalendar mode="single" v-model="date" :month="fixedMonth" hide-navigation>
        <template #caption>
          <div class="mx-0">
            <div class="flex w-full items-center gap-2">
              <Select model-value="0">
                <SelectTrigger class="first:grow">
                  <SelectValue>{{ months[0] }}</SelectValue>
                </SelectTrigger>
                <SelectContent align="start">
                  <SelectItem v-for="(m, i) in months" :key="m" :value="String(i)">{{ m }}</SelectItem>
                </SelectContent>
              </Select>
              <Select model-value="2026">
                <SelectTrigger class="first:grow">
                  <SelectValue>{{ `2026` }}</SelectValue>
                </SelectTrigger>
                <SelectContent align="start">
                  <SelectItem v-for="y in years" :key="y" :value="String(y)">{{ y }}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </template>
      </CCalendar>
    </CardContent>
  </Card>
</template>