import type { SVGProps } from "react";

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

/**
 * Nato icon from flag category
 *
 * @example
 * <Nato size={16} />
 * <Nato size={32} className="text-primary" />
 */
export const Nato = ({ size = 16, ...props }: NatoProps) => (
  <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_2043)">
<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="#0052B4"/>
<path d="M17.1499 12.8372C17.1941 12.5645 17.2174 12.2849 17.2174 12C17.2174 12.2849 17.1941 12.5645 17.1499 12.8372L19.3044 12L17.1499 11.1629L15.9666 10.7031L14.044 9.95604L13.297 8.03346C14.5567 8.44638 15.5536 9.44327 15.9665 10.703L17.1499 11.1628C16.7923 8.95521 15.0447 7.20762 12.8372 6.85005L12 4.69568L11.1628 6.8501C8.95521 7.20776 7.20771 8.95526 6.8501 11.1629L4.69568 12L6.85015 12.8372C7.20776 15.0448 8.95526 16.7923 11.1629 17.1499L12 19.3044L12.8372 17.1499C15.0448 16.7923 16.7923 15.0448 17.1499 12.8372ZM13.2379 10.7622L12 12H16.4234L13.2379 13.2379L12 12V16.4234L10.7621 13.2379L12 12H7.57666L10.7621 10.7622L12 12V7.57666L13.2379 10.7622ZM10.703 8.03351L9.95594 9.95608L8.03346 10.7031C8.44638 9.44327 9.44327 8.44648 10.703 8.03351ZM8.03351 13.297L9.95594 14.0441L10.703 15.9665C9.44327 15.5536 8.44648 14.5568 8.03351 13.297ZM13.297 15.9665L14.0441 14.0441L15.9665 13.297C15.5536 14.5568 14.5568 15.5536 13.297 15.9665Z" fill="#F0F0F0"/>
<path d="M16.4234 12H12L13.2379 13.2379L16.4234 12Z" fill="#0052B4"/>
<path d="M7.57666 12H12L10.7621 10.7622L7.57666 12Z" fill="#0052B4"/>
<path d="M12 16.4234V12L10.7621 13.2379L12 16.4234Z" fill="#0052B4"/>
<path d="M12 12L13.2379 10.7622L12 7.57666V12Z" fill="#0052B4"/>
<path d="M11.4783 1.56519H12.5218V3.65215H11.4783V1.56519Z" fill="#F0F0F0"/>
<path d="M1.56519 11.4783H3.65215V12.5218H1.56519V11.4783Z" fill="#F0F0F0"/>
<path d="M11.4783 20.3478H12.5218V22.4348H11.4783V20.3478Z" fill="#F0F0F0"/>
<path d="M20.3478 11.4783H22.4348V12.5218H20.3478V11.4783Z" fill="#F0F0F0"/>
</g>
<defs>
<clipPath id="clip0_43_2043">
<rect fill="white" height="24" width="24"/>
</clipPath>
</defs>
  </svg>
);
