import type { SVGProps } from "react";

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

/**
 * Mexico — MEX icon from flag category
 *
 * @example
 * <MEX size={16} />
 * <MEX size={32} className="text-primary" />
 */
export const MEX = ({ size = 16, ...props }: MEXProps) => (
  <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_1963)">
<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="M24 12C24 7.24248 21.2313 3.13173 17.2173 1.19073V22.8092C21.2313 20.8683 24 16.7575 24 12Z" fill="#D80027"/>
<path d="M0 12C0 16.7575 2.76867 20.8683 6.78263 22.8093V1.19073C2.76867 3.13173 0 7.24248 0 12Z" fill="#6DA544"/>
<path d="M8.86957 12C8.86957 13.7289 10.2711 15.1305 12 15.1305C13.7289 15.1305 15.1305 13.7289 15.1305 12V10.9565H8.86957V12Z" fill="#6DA544"/>
<path d="M16.1739 9.91305H13.0434C13.0434 9.33677 12.5762 8.86957 11.9999 8.86957C11.4236 8.86957 10.9564 9.33677 10.9564 9.91305H7.82599C7.82599 10.4894 8.32797 10.9565 8.90421 10.9565H8.86947C8.86947 11.5329 9.33663 12 9.91296 12C9.91296 12.5763 10.3801 13.0435 10.9564 13.0435H13.0434C13.6197 13.0435 14.0869 12.5763 14.0869 12C14.6632 12 15.1304 11.5329 15.1304 10.9565H15.0956C15.6719 10.9565 16.1739 10.4894 16.1739 9.91305Z" fill="#FF9811"/>
</g>
<defs>
<clipPath id="clip0_43_1963">
<rect fill="white" height="24" width="24"/>
</clipPath>
</defs>
  </svg>
);
