import type { SVGProps } from "react";

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

/**
 * Trinidad & Tobago — TTO icon from flag category
 *
 * @example
 * <TTO size={16} />
 * <TTO size={32} className="text-primary" />
 */
export const TTO = ({ size = 16, ...props }: TTOProps) => (
  <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_2657)">
<path d="M6.49763 1.33246C5.42335 1.88694 4.41493 2.61374 3.51436 3.5143C2.61375 4.41491 1.88696 5.42333 1.33252 6.49761L9.04847 14.9515L17.5023 22.6674C18.5767 22.1129 19.5851 21.3861 20.4856 20.4856C21.3863 19.585 22.113 18.5766 22.6675 17.5023L14.9515 9.04841L6.49763 1.33246Z" fill="#F0F0F0"/>
<path d="M20.4857 20.4856C20.989 19.9822 21.438 19.4451 21.8333 18.8817L5.11834 2.16675C4.55495 2.56195 4.01781 3.01092 3.51442 3.51431C3.01103 4.0177 2.56206 4.55484 2.16681 5.11828L18.8817 21.8332C19.4451 21.4379 19.9823 20.989 20.4857 20.4856Z" fill="black"/>
<path d="M3.51431 20.4856C7.30026 24.2716 12.9861 24.9983 17.5023 22.6674L1.33251 6.49762C-0.998347 11.0138 -0.271457 16.6997 3.51431 20.4856Z" fill="#D80027"/>
<path d="M20.4856 3.51434C16.6997 -0.271568 11.0139 -0.998318 6.49768 1.33245L22.6674 17.5024C24.9984 12.9861 24.2716 7.30024 20.4856 3.51434Z" fill="#D80027"/>
</g>
<defs>
<clipPath id="clip0_43_2657">
<rect fill="white" height="24" width="24"/>
</clipPath>
</defs>
  </svg>
);
