import { useEffect } from "react"import {  CalendarBody,  CalendarDate,  CalendarDatePagination,  CalendarHeader,  CalendarItem,  CalendarMonthPicker,  CalendarProvider,  CalendarYearPicker,  useCalendarMonth,  useCalendarYear,  type Feature,} from "@/components/kibo-ui/calendar/index"const features: Feature[] = [  {    id: "launch",    name: "Product launch",    startAt: new Date(2025, 0, 6),    endAt: new Date(2025, 0, 8),    status: { id: "in-progress", name: "In progress", color: "#3b82f6" },  },  {    id: "review",    name: "Design review",    startAt: new Date(2025, 0, 13),    endAt: new Date(2025, 0, 21),    status: { id: "planned", name: "Planned", color: "#a855f7" },  },]function CalendarContent() {  const [, setMonth] = useCalendarMonth()  const [, setYear] = useCalendarYear()  useEffect(() => {    setMonth(0)    setYear(2025)  }, [setMonth, setYear])  return (    <>      <CalendarDate>        <div className="flex items-center gap-1">          <CalendarMonthPicker />          <CalendarYearPicker start={2024} end={2026} />        </div>        <CalendarDatePagination />      </CalendarDate>      <CalendarHeader />      <CalendarBody features={features}>        {({ feature }) => <CalendarItem feature={feature} />}      </CalendarBody>    </>  )}export default function CalendarDemo() {  return (    <CalendarProvider className="w-full max-w-lg">      <CalendarContent />    </CalendarProvider>  )}