Localize calendar

<script setup lang="ts">
import { ref, computed } from "vue"
import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar as CCalendar } from "@/components/ui/calendar"
import { CalendarDateRange as CCalendarRange } from "@/components/ui/calendar"

const localizedStrings = {
  en: { title: "Schedule a meeting", description: "Choose your preferred dates" },
  zh: { title: "安排会议", description: "选择您偏好的日期" },
} as const

const locale = ref<keyof typeof localizedStrings>("en")
const dateRange = ref<CCalendarRange | undefined>({ from: new Date(2026, 1, 9), to: new Date(2026, 1, 17) })

const rekaLocale = computed(() => (locale.value === "zh" ? "zh-CN" : "en-US"))
</script>

<template>
  <Card>
    <CardHeader class="flex items-center justify-between">
      <CardTitle>{{ localizedStrings[locale].title }}</CardTitle>
      <CardAction>
        <Select v-model="locale">
          <SelectTrigger class="w-[60px]" aria-label="Select language">
            <SelectValue placeholder="Language" />
          </SelectTrigger>
          <SelectContent position="popper" align="start">
            <SelectItem value="zh">Chinese</SelectItem>
            <SelectItem value="en">English</SelectItem>
          </SelectContent>
        </Select>
      </CardAction>
    </CardHeader>

    <CardContent class="border-t pt-3">
      <CCalendar
        mode="range"
        v-model="dateRange"
        :month="dateRange?.from"
        :locale="rekaLocale"
        button-variant="ghost"
        class="w-full bg-transparent p-0"
      />
    </CardContent>
  </Card>
</template>