import classNames from "classnames";
import "flag-icons/css/flag-icons.min.css";

export interface FlagIconProps {
  countryCode?: string;
}

// Country code overrides
const countryOverrides: Record<string, string> = {
  en: "gb",
  cs: "cz",
  el: "gr",
  fa: "ir",
  ko: "kr",
  he: "il",
  ze: "cn",
  ar: "sa",
  ja: "jp",
  bs: "ba",
  vi: "vn",
  zh: "cn",
  sl: "si",
};

export function FlagIcon(props: FlagIconProps) {
  let countryCode =
    (props.countryCode || "")?.split("-").pop()?.toLowerCase() || "";
  if (countryOverrides[countryCode])
    countryCode = countryOverrides[countryCode];

  if (countryCode === "pirate")
    return (
      <div className="w-8 h-6 rounded bg-[#2E3439] flex justify-center items-center">
        <img src="/skull.svg" className="w-4 h-4" />
      </div>
    );

  return (
    <span
      className={classNames(
        "!w-8 h-6 rounded overflow-hidden bg-video-context-flagBg bg-cover bg-center block fi",
        props.countryCode ? `fi-${countryCode}` : undefined
      )}
    />
  );
}
