import {
  type CalendarProps,
  type DateValue,
  useCalendar,
} from "@react-aria/calendar";
import { useLocale } from "@react-aria/i18n";
import { useCalendarState } from "@react-stately/calendar";
import { createCalendar } from "@internationalized/date";

import { Button } from "../button/Button";
import { CalendarGrid } from "./CalendarGrid";
import { convertButtonProps } from "./convertButtonProps";

export const Calendar = (props: CalendarProps<DateValue>) => {
  const { locale } = useLocale();
  const state = useCalendarState({
    ...props,
    locale,
    createCalendar,
  });

  const { calendarProps, prevButtonProps, nextButtonProps, title } =
    useCalendar(props, state);

  return (
    <div {...calendarProps} className="flex flex-col gap-16">
      <div className="flex items-center justify-between">
        <Button
          size="24"
          icon="chevron-left-mini"
          iconWeight="bold"
          variant="tertiary"
          ESCAPE_className="shadow-S100 bg-N0"
          {...convertButtonProps(prevButtonProps)}
        />
        <h2 className="text-style-B200 m-0">{title}</h2>
        <Button
          size="24"
          icon="chevron-right-mini"
          iconWeight="bold"
          variant="tertiary"
          ESCAPE_className="shadow-S100 bg-N0"
          {...convertButtonProps(nextButtonProps)}
        />
      </div>
      <CalendarGrid state={state} />
    </div>
  );
};
