import type { SVGProps } from "react";

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

/**
 * Caribbean Netherlands — BES icon from flag category
 *
 * @example
 * <BES size={16} />
 * <BES size={32} className="text-primary" />
 */
export const BES = ({ size = 16, ...props }: BESProps) => (
  <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_1003)">
<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="#F0F0F0"/>
<path d="M3.51466 3.51469C0.942867 6.08649 -0.217149 9.53527 0.0337726 12.8984L12.8983 0.0338451C9.53519 -0.217124 6.08646 0.942892 3.51466 3.51469Z" fill="#FFDA44"/>
<path d="M4.28485 21.1908C8.99959 25.1575 16.0477 24.9229 20.4853 20.4853C24.923 16.0477 25.1576 8.99954 21.1909 4.28485L4.28485 21.1908Z" fill="#0052B4"/>
<path d="M11.9572 11.5167L12.9913 10.9565L11.9572 10.3964C11.7157 8.82788 10.4764 7.58855 8.90796 7.34714L8.34775 6.31299L7.7876 7.3471C6.21916 7.5885 4.97988 8.82783 4.73838 10.3963L3.70422 10.9565L4.73833 11.5167C4.97979 13.0852 6.21907 14.3245 7.78755 14.5659L8.34775 15.6L8.90791 14.5659C10.4764 14.3245 11.7157 13.0852 11.9572 11.5167ZM8.3478 13.0435C7.19519 13.0435 6.26083 12.1092 6.26083 10.9565C6.26083 9.80386 7.19515 8.86955 8.3478 8.86955C9.50046 8.86955 10.4348 9.80386 10.4348 10.9565C10.4348 12.1092 9.50041 13.0435 8.3478 13.0435Z" fill="black"/>
<path d="M8.34786 9.3913L8.79968 10.1739H9.70339L9.25151 10.9565L9.70339 11.7391H8.79968L8.34786 12.5217L7.89603 11.7391H6.99237L7.4442 10.9565L6.99237 10.1739H7.89603L8.34786 9.3913Z" fill="#D80027"/>
</g>
<defs>
<clipPath id="clip0_43_1003">
<rect fill="white" height="24" width="24"/>
</clipPath>
</defs>
  </svg>
);