From 34b84fd44d96f033151782bb577ae018ca33531c Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Fri, 17 Apr 2026 02:03:24 +0300
Subject: [PATCH] Add DaysOfWeekStrip component for flight schedule

---
 .../FlightSchedule/DaysOfWeekStrip.test.tsx   | 45 +++++++++++++++++++
 .../FlightSchedule/DaysOfWeekStrip.tsx        | 30 +++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.test.tsx
 create mode 100644 src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.tsx

diff --git a/src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.test.tsx b/src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.test.tsx
new file mode 100644
index 00000000..91d43641
--- /dev/null
+++ b/src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.test.tsx
@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DaysOfWeekStrip } from "./DaysOfWeekStrip.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("DaysOfWeekStrip", () => {
+  it("renders 7 day boxes", () => {
+    render(<DaysOfWeekStrip flightBitString="1111111" />);
+    const boxes = screen.getAllByTestId(/^day-of-week-\d$/);
+    expect(boxes).toHaveLength(7);
+  });
+
+  it("marks first 3 active, last 4 inactive for '1110000'", () => {
+    render(<DaysOfWeekStrip flightBitString="1110000" />);
+    expect(screen.getByTestId("day-of-week-0").className).not.toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-1").className).not.toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-2").className).not.toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-3").className).toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-6").className).toMatch(/--inactive/);
+  });
+
+  it("marks all active for '1111111'", () => {
+    render(<DaysOfWeekStrip flightBitString="1111111" />);
+    for (let i = 0; i < 7; i++) {
+      expect(screen.getByTestId(`day-of-week-${i}`).className).not.toMatch(/--inactive/);
+    }
+  });
+
+  it("marks all inactive for '0000000'", () => {
+    render(<DaysOfWeekStrip flightBitString="0000000" />);
+    for (let i = 0; i < 7; i++) {
+      expect(screen.getByTestId(`day-of-week-${i}`).className).toMatch(/--inactive/);
+    }
+  });
+
+  it("renders DAYS.1 through DAYS.7 labels in order", () => {
+    render(<DaysOfWeekStrip flightBitString="1111111" />);
+    expect(screen.getByTestId("day-of-week-0").textContent).toContain("DAYS.1");
+    expect(screen.getByTestId("day-of-week-6").textContent).toContain("DAYS.7");
+  });
+});
diff --git a/src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.tsx b/src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.tsx
new file mode 100644
index 00000000..78f109ea
--- /dev/null
+++ b/src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.tsx
@@ -0,0 +1,30 @@
+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>
+  );
+};