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

export interface DayTabButtonProps {
  date: string;
  isActive: boolean;
  isDisabled: boolean;
  locale: string;
  onClick: (date: string) => void;
}

export const DayTabButton: FC<DayTabButtonProps> = ({
  date,
  isActive,
  isDisabled,
  locale,
  onClick,
}) => {
  const d = parseYyyymmdd(date);
  const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
  const day = new Intl.DateTimeFormat(locale, { day: "numeric" }).format(d);
  const month = new Intl.DateTimeFormat(locale, { month: "short" }).format(d);

  const classes = [
    "day-tab",
    isActive ? "day-tab--active" : "",
    isDisabled ? "day-tab--disabled" : "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button
      type="button"
      className={classes}
      disabled={isDisabled}
      data-testid={`day-tab-${date}`}
      onClick={() => {
        if (!isDisabled) onClick(date);
      }}
    >
      <span className="day-tab__weekday">{weekday}</span>
      <span className="day-tab__day">{day}</span>
      <span className="day-tab__month">{month}</span>
    </button>
  );
};
