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

/** Renders a thead row with localised weekday short names derived from the calendar locale. */
export function CalendarGridHead(props: CalendarGridHeadProps): JSX.Element {
  const ctx = useCalendarContext();

  return (
    <thead data-scope="calendar" data-part="grid-head" {...props}>
      <tr>
        <For each={ctx.getWeekDayNames()}>
          {(name) => (
            <th scope="col" aria-label={name}>
              {name}
            </th>
          )}
        </For>
      </tr>
    </thead>
  );
}
