import { useIcon } from 'hooks';
import React, { useMemo } from 'react';
import Svg, { Path } from 'react-native-svg';
import { IconProps } from '../types';

export const Flag: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);

  return (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0.116211 0.126953L5.03854 19.5444H6.5887L1.66637 0.126953H0.116211ZM17.1061 4.17375H13.8699L13.0608 0.9375H3.35205L5.77923 10.6462H8.20642L9.01548 13.8825H19.5333L17.1061 4.17375ZM11.7976 2.55469H5.42627L7.04439 9.02718H13.4158L11.7976 2.55469ZM12.5718 10.6465L10.2611 12.1869L9.87598 10.6465H12.5718ZM14.2746 5.79102L15.4882 10.6454L13.061 12.2635H17.4607L15.8426 5.79102H14.2746Z"
        fill={color}
      />
    </Svg>
  );
};
