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

export const EllipseBordered: React.FC<IconProps & EllipseBorderedProps> = ({
  borderVariant = 'base',
  colorVariant = 'secondary',
  ...props
}) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);
  const borderColor = useMemo(() => getIconColor(borderVariant), [getIconColor, borderVariant]);

  return (
    <Svg width="11" height="11" viewBox="0 0 11 11" fill="none" {...props}>
      <Circle cx="5.5" cy="5.85254" r="4" fill={color} stroke={borderColor} strokeWidth="2" />
    </Svg>
  );
};

interface EllipseBorderedProps {
  borderVariant: IconColorVariantsType;
}