Date selector with popover

<!--
  IconPlaceholder (иконка "calendar" в триггере) заменена инлайновым
  `<svg>`. Popover закрыт по умолчанию — `PopoverContent` (и `DateSelector`
  внутри него) не монтируется, поэтому известное расхождение сетки
  календаря сюда не попадает (docs/PORTING.md, block-date-selector).
-->
<script setup lang="ts">
import { ref, watch } from "vue"
import { DateSelector } from "@/components/reui/date-selector"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"
import { DateSelectorValue } from "@/components/reui/date-selector"

const value = ref<DateSelectorValue | undefined>(undefined)
const open = ref(false)
const internalValue = ref<DateSelectorValue | undefined>(value.value)

watch(open, (isOpen) => {
  if (isOpen) {
    internalValue.value = value.value
  }
})

const displayText = "Select a date"
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button variant="outline" class="w-56 justify-start">
        <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"
        ><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg>
        {{ displayText }}
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-auto gap-3 p-0" align="start" :side-offset="4">
      <div class="p-3">
        <DateSelector :value="internalValue" @change="internalValue = $event" :allow-range="true" label="Due date" input-hint="Try: 2025, Q4, 05/10/2025" />
      </div>
      <Separator class="p-0" />
      <div class="flex justify-end gap-2 p-3 pt-0">
        <Button variant="outline">Cancel</Button>
        <Button>Apply</Button>
      </div>
    </PopoverContent>
  </Popover>
</template>