import React from 'react';
import Svg, { Path } from 'react-native-svg';
import { useThemeColor } from '../theme';

interface CloseIconProps {
  size?: number;
  color?: string;
}

export const CloseIcon: React.FC<CloseIconProps> = ({ size = 16, color }) => {
  const themeColorForeground = useThemeColor('foreground');

  return (
    <Svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill={color ?? themeColorForeground}
    >
      <Path
        fillRule="evenodd"
        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
        clipRule="evenodd"
      />
    </Svg>
  );
};

CloseIcon.displayName = 'HeroUINative.CloseIcon';