/**
 * Page navigation tabs matching the Angular `flights-page-tabs` component.
 *
 * Renders "Online Timetable" / "Schedule" / "Flights Map" tab buttons
 * using the same `.tabs` class names as the Angular version.
 */

import type { FC } from "react";
import { Link, useParams } from "@modern-js/runtime/router";
import { useTranslation } from "@/i18n/provider.js";
import { useFeatureFlag } from "@/features/flights-map/hooks/useFeatureFlag.js";
import "./PageTabs.scss";

export type ViewType = "onlineboard" | "schedule" | "flights-map";

export interface PageTabsProps {
  viewType: ViewType;
  showFlightsMap?: boolean;
}

export const PageTabs: FC<PageTabsProps> = ({
  viewType,
  showFlightsMap,
}) => {
  const flightsMapEnabled = useFeatureFlag("flightsMap");
  const showMap = showFlightsMap ?? flightsMapEnabled;
  const { t } = useTranslation();
  const routeParams = useParams<{ lang: string }>();
  const lang = routeParams.lang ?? "ru";

  return (
    <div className="tabs">
      <div className="tabs__row">
        <Link
          className={`tabs__tab${viewType === "onlineboard" ? " active" : ""}`}
          to={`/${lang}/onlineboard`}
          data-testid="onlineboard-tab"
        >
          {t("BOARD.TITLE")}
        </Link>
        <Link
          className={`tabs__tab${viewType === "schedule" ? " active" : ""}`}
          to={`/${lang}/schedule`}
          data-testid="schedule-tab"
        >
          {t("SCHEDULE.TITLE-TAB")}
        </Link>
      </div>

      {showMap && (
        <div className="tabs__row">
          <Link
            className={`tabs__tab tabs__tab--full${viewType === "flights-map" ? " active" : ""}`}
            to={`/${lang}/flights-map`}
            data-testid="flights-map-tab"
          >
            {t("FLIGHTS-MAP.TITLE")}
          </Link>
        </div>
      )}
    </div>
  );
};
