import type { SVGProps } from "react";

export interface TKLProps extends SVGProps<SVGSVGElement> {
  /**
   * Icon size (width and height)
   * @default 16
   */
  size?: number | string;
}

/**
 * Tokelau — TKL icon from flag category
 *
 * @example
 * <TKL size={16} />
 * <TKL size={32} className="text-primary" />
 */
export const TKL = ({ size = 16, ...props }: TKLProps) => (
  <svg
    fill="none"
    height={size}
    viewBox="0 0 24 24"
    width={size}
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <g clipPath="url(#clip0_43_2639)">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#FFDA44"/>
<path d="M19.3043 5.73914C19.1967 6.25641 19.1478 6.80733 19.1478 7.35652C19.1478 10.5222 21.035 13.2621 23.7394 14.4955C23.9097 13.6904 24 12.8558 24 12C24 5.37262 18.6274 0 12 0C5.37262 0 0 5.37262 0 12C0 18.6274 5.37262 24 12 24C16.1101 24 19.7371 21.9332 21.8998 18.7826H6.78263V17.2174H22.8093C22.9733 16.8782 23.1215 16.53 23.2537 16.1739H6.78263L19.3043 5.73914Z" fill="#0052B4"/>
<path d="M8.81583 6.26083L9.07486 7.05799H9.91299L9.23494 7.55069L9.49397 8.3478L8.81583 7.85519L8.13778 8.3478L8.39677 7.55069L7.71863 7.05799H8.5568L8.81583 6.26083Z" fill="#F0F0F0"/>
<path d="M5.41116 12L5.73497 12.9965H6.78262L5.93498 13.6122L6.2588 14.6087L5.41116 13.9928L4.56356 14.6087L4.88733 13.6122L4.03973 12.9965H5.08739L5.41116 12Z" fill="#F0F0F0"/>
<path d="M5.41116 3.65216L5.73497 4.64868H6.78262L5.93498 5.26438L6.2588 6.26085L5.41116 5.645L4.56356 6.26085L4.88733 5.26438L4.03973 4.64868H5.08739L5.41116 3.65216Z" fill="#F0F0F0"/>
<path d="M2.80245 8.34781L3.12626 9.34432H4.17387L3.32628 9.96003L3.65009 10.9565L2.80245 10.3407L1.95486 10.9565L2.27862 9.96003L1.43103 9.34432H2.47864L2.80245 8.34781Z" fill="#F0F0F0"/>
</g>
<defs>
<clipPath id="clip0_43_2639">
<rect fill="white" height="24" width="24"/>
</clipPath>
</defs>
  </svg>
);