import type { SupportedLocale } from "@/lib/i18n-config";

const STAR_POINTS = "12,3.8 13.7,9 19.2,9 14.7,12.2 16.4,17.4 12,14.2 7.6,17.4 9.3,12.2 4.8,9 10.3,9";

export function LocaleFlag({ locale }: { locale: SupportedLocale }) {
  const commonProps = {
    "aria-hidden": true,
    className: "h-[22px] w-[30px] shrink-0 overflow-hidden rounded-[3px] shadow-[0_0_0_1px_rgba(25,43,74,0.12)]",
    viewBox: "0 0 30 22",
  } as const;

  if (locale === "ko") {
    return (
      <svg {...commonProps}>
        <rect width="30" height="22" fill="#fff" />
        <path d="M15 6.4a4.6 4.6 0 0 1 0 9.2 2.3 2.3 0 0 0 0-4.6 2.3 2.3 0 0 1 0-4.6Z" fill="#d9282f" />
        <path d="M15 15.6a4.6 4.6 0 0 1 0-9.2 2.3 2.3 0 0 0 0 4.6 2.3 2.3 0 0 1 0 4.6Z" fill="#1456a0" />
        <g stroke="#111" strokeWidth=".75">
          <path d="m5.4 5.2 3.6-2.6m-3 3.5 3.6-2.6m-3 3.5 3.6-2.6" />
          <path d="m21 19.4 3.6-2.6m-4.2 1.7 3.6-2.6m-4.2 1.7 3.6-2.6" />
          <path d="m20.2 3.8 1.45 1.05m.5.35 1.45 1.05m-4-1.55 1.45 1.05m.5.35 1.45 1.05m-4-1.55 1.45 1.05m.5.35 1.45 1.05" />
          <path d="m6.4 15.8 1.45 1.05m.5.35 1.45 1.05m-4-1.55 3.4 2.45m-2.8-3.35 1.45 1.05m.5.35 1.45 1.05" />
        </g>
      </svg>
    );
  }

  if (locale === "en") {
    return (
      <svg {...commonProps}>
        <rect width="30" height="22" fill="#fff" />
        {[0, 4, 8, 12, 16, 20].map((y) => (
          <rect key={y} y={y} width="30" height="2" fill="#c8333e" />
        ))}
        <rect width="13" height="11" fill="#24457d" />
        <g fill="#fff">
          {[2.2, 6.5, 10.8].flatMap((x) =>
            [2.2, 5.4, 8.6].map((y) => <circle key={`${x}-${y}`} cx={x} cy={y} r=".65" />),
          )}
        </g>
      </svg>
    );
  }

  if (locale === "zh") {
    return (
      <svg {...commonProps}>
        <rect width="30" height="22" fill="#df2636" />
        <polygon points="7,3 8.1,6.1 11.4,6.1 8.7,8 9.8,11.2 7,9.3 4.2,11.2 5.3,8 2.6,6.1 5.9,6.1" fill="#ffdf3d" />
      </svg>
    );
  }

  if (locale === "ja") {
    return (
      <svg {...commonProps}>
        <rect width="30" height="22" fill="#fff" />
        <circle cx="15" cy="11" r="5.2" fill="#c92f41" />
      </svg>
    );
  }

  if (locale === "vi") {
    return (
      <svg {...commonProps}>
        <rect width="30" height="22" fill="#da251d" />
        <polygon points={STAR_POINTS} fill="#ffdd31" transform="translate(3 0)" />
      </svg>
    );
  }

  return (
    <svg {...commonProps}>
      <rect width="30" height="7.34" fill="#fff" />
      <rect y="7.33" width="30" height="7.34" fill="#2458a6" />
      <rect y="14.66" width="30" height="7.34" fill="#d52b3a" />
    </svg>
  );
}