/**
 * 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 } from "@modern-js/runtime/router";
import { useTranslation } from "@/i18n/provider.js";
import { useLocale } from "@/i18n/useLocale.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 { locale } = useLocale();

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

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