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

export const ExclamationMark: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);
  return (
    <Svg width="3" height="10" viewBox="0 0 3 10" fill="none" {...props}>
      <Path
        d="M1.90221 9.54709C2.45455 9.54709 2.90232 9.09933 2.90232 8.54698C2.90232 7.99464 2.45455 7.54688 1.90221 7.54688C1.34986 7.54688 0.9021 7.99464 0.9021 8.54698C0.9021 9.09933 1.34986 9.54709 1.90221 9.54709Z"
        fill={color}
      />
      <Path
        d="M1.90221 0.546875C1.35215 0.546875 0.9021 0.996924 0.9021 1.54698V5.54742C0.9021 6.09748 1.35215 6.54753 1.90221 6.54753C2.45227 6.54753 2.90232 6.09748 2.90232 5.54742V1.54698C2.90232 0.996924 2.45227 0.546875 1.90221 0.546875Z"
        fill={color}
      />
    </Svg>
  );
};
