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

export interface IFlyWarningProps {
  flightNumber: string | number;
  /**
   * "detail" (default) mirrors `warning-ifly-carrier-detail` — a
   * boxed block with vertical orange bar, highlighted caption and
   * a link. Use on details pages.
   *
   * "small" mirrors `warning-ifly-carrier-small` — an inline
   * caption + body line, no bar, no link. Use inside flight rows.
   */
  variant?: "detail" | "small";
}

function isIFlyRange(num: string | number): boolean {
  const n = typeof num === "string" ? parseInt(num, 10) : num;
  if (!Number.isFinite(n)) return false;
  return n > 5800 && n < 5949;
}

export const IFlyWarning: FC<IFlyWarningProps> = ({ flightNumber, variant = "detail" }) => {
  const { t } = useTranslation();
  if (!isIFlyRange(flightNumber)) return null;
  if (variant === "small") {
    return (
      <span className="ifly-warning ifly-warning--small" data-testid="ifly-warning">
        <span className="ifly-warning__highlight">
          {t("WARNING.IFLY_HIGHLIGHT")}
        </span>{" "}
        {t("WARNING.IFLY_BODY")}
      </span>
    );
  }
  return (
    <div className="ifly-warning" data-testid="ifly-warning">
      <div className="ifly-warning__bar" aria-hidden="true" />
      <div className="ifly-warning__text">
        <span className="ifly-warning__highlight">
          {t("WARNING.IFLY_HIGHLIGHT")}
        </span>{" "}
        {t("WARNING.IFLY_BODY")}
        <br />
        <span
          dangerouslySetInnerHTML={{ __html: t("WARNING.IFLY_INFO") }}
        />
      </div>
    </div>
  );
};
