import type { JSX } from "solid-js";
import { useCalendarContext } from "./calendar-context";
import type { CalendarHeadingProps } from "./calendar.props";

/** Displays the current month and year using Intl.DateTimeFormat with the calendar locale. */
export function CalendarHeading(props: CalendarHeadingProps): JSX.Element {
  const ctx = useCalendarContext();

  const label = () => {
    const date = new Date(ctx.displayYear(), ctx.displayMonth(), 1);
    return new Intl.DateTimeFormat(ctx.locale(), { month: "long", year: "numeric" }).format(date);
  };

  return (
    <h2 data-scope="calendar" data-part="heading" aria-live="polite" {...props}>
      {label()}
    </h2>
  );
}
