// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useState, type ComponentProps } from "react";
export type MiniCalendarProps = Omit<
  ComponentProps<"div">,
  "defaultValue" | "onChange"
> & {
  startDate?: Date;
  defaultStartDate?: Date;
  onStartDateChange?: (date: Date) => void;
  value?: Date;
  defaultValue?: Date;
  onValueChange?: (date: Date) => void;
  days?: number;
  locale?: string;
  disabled?: boolean;
  isDateDisabled?: (date: Date) => boolean;
};
export function MiniCalendar({
  startDate,
  defaultStartDate = new Date(),
  onStartDateChange,
  value,
  defaultValue,
  onValueChange,
  days = 5,
  locale = "en-US",
  disabled,
  isDateDisabled,
  className = "",
  ...props
}: MiniCalendarProps) {
  const [start, setStart] = useState(defaultStartDate);
  const [selected, setSelected] = useState(defaultValue);
  const current = startDate ?? start;
  const count = Number.isFinite(days)
    ? Math.max(1, Math.min(31, Math.floor(days)))
    : 5;
  const shift = (n: number) => {
    const next = new Date(current);
    next.setDate(next.getDate() + n * count);
    if (startDate === undefined) setStart(next);
    onStartDateChange?.(next);
  };
  return (
    <div className={`ynr-mini-calendar ${className}`} {...props}>
      <button
        type="button"
        aria-label="Previous days"
        disabled={disabled}
        onClick={() => shift(-1)}
      >
        ‹
      </button>
      <div className="ynr-mini-calendar-days">
        {Array.from({ length: count }, (_, i) => {
          const date = new Date(current);
          date.setDate(date.getDate() + i);
          return (
            <button
              type="button"
              key={date.toDateString()}
              aria-label={date.toLocaleDateString(locale, {
                dateStyle: "full",
              })}
              aria-pressed={
                (value ?? selected)?.toDateString() === date.toDateString()
              }
              disabled={disabled || isDateDisabled?.(date)}
              onClick={() => {
                if (value === undefined) setSelected(date);
                onValueChange?.(date);
              }}
            >
              <small>
                {date.toLocaleDateString(locale, { month: "short" })}
              </small>
              {date.getDate()}
            </button>
          );
        })}
      </div>
      <button
        type="button"
        aria-label="Next days"
        disabled={disabled}
        onClick={() => shift(1)}
      >
        ›
      </button>
    </div>
  );
}