Range Calendar

"use client"

import { RangeCalendar } from "@/components/ui/heroui-range-calendar"
import { getLocalTimeZone, isToday } from "@internationalized/date"
import { I18nProvider } from "react-aria-components"

const datesWithEvents = [3, 7, 12, 15, 21, 28]

export default function WithIndicators() {
  return (
    <I18nProvider locale="en-US">
      <div className="flex w-full items-center justify-center p-8">
        <RangeCalendar aria-label="Trip dates">
          <RangeCalendar.Header>
            <RangeCalendar.Heading />
            <RangeCalendar.NavButton slot="previous" />
            <RangeCalendar.NavButton slot="next" />
          </RangeCalendar.Header>
          <RangeCalendar.Grid>
            <RangeCalendar.GridHeader>
              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}
            </RangeCalendar.GridHeader>
            <RangeCalendar.GridBody>
              {(date) => (
                <RangeCalendar.Cell date={date}>
                  {({ formattedDate }) => (
                    <>
                      {formattedDate}
                      {(isToday(date, getLocalTimeZone()) || datesWithEvents.includes(date.day)) && (
                        <RangeCalendar.CellIndicator />
                      )}
                    </>
                  )}
                </RangeCalendar.Cell>
              )}
            </RangeCalendar.GridBody>
          </RangeCalendar.Grid>
        </RangeCalendar>
      </div>
    </I18nProvider>
  )
}