Calendar

"use client";

import { RiCalendarLine } from "@remixicon/react";
import * as React from "react";

import {
  AppShell,
  AppShellHeader,
} from "@/components/blocks/app-shell-01/components/app-shell";
import {
  CalendarGrid,
  CalendarToolbar,
  useCalendar,
} from "@/components/blocks/calendar-01/components/calendar";
import {
  CALENDAR_SOURCES,
  sampleEvents,
} from "@/components/blocks/calendar/components/calendar-data";

/**
 * The calendar page inside the shared app shell: the month is the page
 * heading, and the calendars popover, month navigation and New event button
 * sit in the shell header next to the bell.
 */
export function CalendarApp({
  basePath = "",
  links,
  popupClassName,
}: {
  basePath?: string;
  /** Hrefs for the other pages in the sidebar, by nav key. */
  links?: Partial<Record<string, string>>;
  popupClassName?: string;
}) {
  const initial = React.useMemo(() => new Date(), []);
  const calendar = useCalendar({
    events: sampleEvents(initial),
    initialMonth: initial,
  });
  return (
    <AppShell
      selected="calendar"
      basePath={basePath}
      links={links}
      popupClassName={popupClassName}
    >
      <AppShellHeader
        title="Calendar"
        heading={calendar.monthLabel}
        icon={RiCalendarLine}
        actions={
          <CalendarToolbar
            calendar={calendar}
            sources={CALENDAR_SOURCES}
            popupClassName={popupClassName}
          />
        }
      />
      <div className="pb-4">
        <CalendarGrid calendar={calendar} popupClassName={popupClassName} />
      </div>
    </AppShell>
  );
}