import type { FC } from "react";
import { parseYyyymmdd } from "./dateRange.js";
import "./DayTabs.scss";

export interface DaySelectProps {
  selectedDate: string;
  availableDates: string[];
  locale: string;
  onNavigate: (date: string) => void;
}

function formatLabel(date: string, locale: string): string {
  const d = parseYyyymmdd(date);
  return new Intl.DateTimeFormat(locale, {
    weekday: "short",
    month: "short",
    day: "numeric",
  }).format(d);
}

export const DaySelect: FC<DaySelectProps> = ({
  selectedDate,
  availableDates,
  locale,
  onNavigate,
}) => {
  return (
    <select
      className="day-select"
      data-testid="day-select"
      value={selectedDate}
      onChange={(e) => onNavigate(e.target.value)}
    >
      {availableDates.map((date) => (
        <option key={date} value={date}>
          {formatLabel(date, locale)}
        </option>
      ))}
    </select>
  );
};
