/**
 * Calendar header: month title, prev/next navigation, weekday labels.
 * Replaces the header from webapp index.html and calendar.js month title.
 */

"use client";

import { useTranslation } from "@/i18n/use-translation";
import { cn } from "@/lib/utils";
import { MonthNavHeader } from "@/components/calendar/MonthNavHeader";

export interface CalendarHeaderProps {
  /** Currently displayed month (used for title). */
  month: Date;
  /** Whether month navigation is disabled (e.g. during loading). */
  disabled?: boolean;
  onPrevMonth: () => void;
  onNextMonth: () => void;
  className?: string;
}

export function CalendarHeader({
  month,
  disabled = false,
  onPrevMonth,
  onNextMonth,
  className,
}: CalendarHeaderProps) {
  const { weekdayLabels } = useTranslation();
  const labels = weekdayLabels();

  return (
    <header className={cn("flex flex-col", className)}>
      <MonthNavHeader
        month={month}
        disabled={disabled}
        onPrevMonth={onPrevMonth}
        onNextMonth={onNextMonth}
        ariaLive
        className="mb-3"
      />
      <div className="grid grid-cols-7 gap-0.5 mb-1.5 text-center text-[0.75rem] text-muted">
        {labels.map((label, i) => (
          <span key={i} aria-hidden>
            {label}
          </span>
        ))}
      </div>
    </header>
  );
}