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

export const Pin: React.FC<IconProps> = ({ colorVariant = 'body', ...props }) => {
  const { getIconColor } = useIcon();

  return (
    <Svg width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
      <Path
        d="M14.0886 4.77193C13.662 3.93098 13.0309 3.21074 12.2533 2.67743C11.4757 2.14412 10.5764 1.81487 9.63829 1.71992C9.2139 1.67734 8.78631 1.67734 8.36192 1.71992C7.42379 1.81493 6.52458 2.14418 5.74692 2.67742C4.96925 3.21066 4.33807 3.9308 3.91136 4.77165C3.37451 5.84453 3.16714 7.05229 3.31539 8.2428C3.46363 9.43331 3.96085 10.5533 4.74443 11.4618L8.56544 16.1074C8.6182 16.1716 8.68454 16.2233 8.75967 16.2588C8.83481 16.2943 8.91687 16.3127 8.99997 16.3127C9.08306 16.3127 9.16513 16.2943 9.24026 16.2588C9.3154 16.2233 9.38173 16.1716 9.4345 16.1074L13.2555 11.4618C14.0391 10.5534 14.5363 9.43341 14.6845 8.24295C14.8328 7.05248 14.6254 5.84477 14.0886 4.77193ZM8.99997 9.56252C8.55496 9.56252 8.11995 9.43055 7.74993 9.18332C7.37992 8.93609 7.09153 8.58469 6.92124 8.17355C6.75094 7.76242 6.70638 7.31002 6.7932 6.87357C6.88002 6.43711 7.09431 6.0362 7.40898 5.72153C7.72364 5.40686 8.12456 5.19257 8.56101 5.10575C8.99747 5.01894 9.44987 5.06349 9.86101 5.23379C10.2721 5.40409 10.6235 5.69248 10.8708 6.06249C11.118 6.4325 11.25 6.86751 11.25 7.31252C11.2493 7.90904 11.012 8.48093 10.5902 8.90273C10.1684 9.32454 9.59649 9.56182 8.99997 9.56252Z"
        fill={getIconColor(colorVariant)}
      />
    </Svg>
  );
};
