import { type FC, useMemo } from "react";
import { resolveOperatorLogoPaths, pickLogoSrc } from "@/shared/operatorIcon.js";
import "./OperatorLogo.scss";

export interface OperatorLogoProps {
  /** IATA carrier code (e.g. "SU", "FV") */
  carrier: string;
  /** Locale — controls en vs ru variant when both exist */
  locale?: string;
  /** Render a rounded variant (smaller square) */
  round?: boolean;
  /** Accessible label, e.g. airline name */
  title?: string;
}

export const OperatorLogo: FC<OperatorLogoProps> = ({ carrier, locale, round, title }) => {
  const style = useMemo(() => {
    const paths = resolveOperatorLogoPaths(carrier);
    if (!paths) return undefined;
    const src = pickLogoSrc(paths, locale ?? "", round ?? false);
    return { backgroundImage: `url('${src}')` };
  }, [carrier, locale, round]);

  const className = `operator-logo operator-logo--${carrier}${round ? " operator-logo--round" : ""}`;

  return (
    <div
      className={className}
      style={style}
      data-testid="operator-logo"
      data-carrier={carrier}
      aria-label={title ?? carrier}
      title={title ?? carrier}
      role="img"
    />
  );
};
