Calendar with date picker and presets

<!--
  Кейс проверяет ЗАКРЫТОЕ состояние триггера (см. PORTING.md §5).
-->
<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CCalendar } from "@/components/ui/calendar"

const today = new Date(2026, 0, 15)
const month = ref<Date>(today)
const date = ref<Date>(today)
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button class="group/pick-date w-60 justify-between" variant="outline">
        <span class="truncate text-muted-foreground">{{ `Jan 15, 2026` }}</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-muted-foreground/80 group-hover:text-foreground shrink-0 transition-colors">
          <path d="M8 2v4" />
          <path d="M16 2v4" />
          <rect width="18" height="18" x="3" y="4" rx="2" />
          <path d="M3 10h18" />
        </svg>
      </Button>
    </PopoverTrigger>
    <PopoverContent align="start" class="w-auto p-0">
      <Card class="p-0">
        <CardContent class="p-0">
          <CCalendar mode="single" v-model="date" :month="month" @update:month="month = $event" :disabled-fn="(d: Date) => d > today" />
        </CardContent>
      </Card>
    </PopoverContent>
  </Popover>
</template>