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

export interface DaysOfWeekStripProps {
  /**
   * Operating-days indicator from the API. The `daysOfWeek.flight` field
   * is a STRING OF DIGITS (1=Mon..7=Sun), one digit per active day —
   * NOT a 7-char bitmask. Examples: `"156"` = Mon/Fri/Sat;
   * `"1234567"` = every day; `""` = none. Anything else (alternative
   * shape, missing field) falls through to "all inactive" so the badge
   * row still renders without crashing.
   */
  flightBitString: string;
}

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

export const DaysOfWeekStrip: FC<DaysOfWeekStripProps> = ({ flightBitString }) => {
  const { t } = useTranslation();
  // Build a Set<dayNumber> from the API string. Each character is a
  // 1-based ISO weekday digit ("1" → Mon, …, "7" → Sun).
  const activeDays = new Set<number>();
  for (const ch of flightBitString) {
    const n = Number(ch);
    if (Number.isInteger(n) && n >= 1 && n <= 7) activeDays.add(n);
  }

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