import type { FC } from "react";
import { useTranslation } from "@/i18n/provider.js";

export interface DaysOfWeekStripProps {
  flightBitString: string;
}

const DAY_INDEXES = [0, 1, 2, 3, 4, 5, 6] as const;

export const DaysOfWeekStrip: FC<DaysOfWeekStripProps> = ({ flightBitString }) => {
  const { t } = useTranslation();

  return (
    <div className="days-of-week-strip">
      {DAY_INDEXES.map((i) => {
        const isActive = flightBitString[i] === "1";
        const className = isActive ? "day" : "day day--inactive";
        return (
          <span
            key={i}
            className={className}
            data-testid={`day-of-week-${i}`}
          >
            {t(`DAYS.${i + 1}`)}
          </span>
        );
      })}
    </div>
  );
};
