import { FC } from 'react'

import Svg, { Path } from 'react-native-svg'

import { useTheme } from '../../../../providers/native'
import { SvgIconProps } from '../types'

const CloseIcon: FC<SvgIconProps> = ({
  isActive = false,
  color,
  width = '24',
  height = '25',
  ...props
}) => {
  const { colors } = useTheme()

  const defaultColor = color ?? colors.object.low
  const svgColor = isActive ? colors.primary.high : defaultColor

  return (
    <Svg width={width} height={height} viewBox="0 0 24 25" color={svgColor} {...props}>
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11.9943 14.0238L17.6486 19.6785C17.8371 19.8606 18.0896 19.9613 18.3516 19.959C18.6137 19.9568 18.8644 19.8516 19.0497 19.6663C19.235 19.481 19.3402 19.2303 19.3424 18.9682C19.3447 18.7061 19.244 18.4536 19.0619 18.2651L13.4076 12.6104L19.0619 6.95573C19.244 6.76721 19.3447 6.51471 19.3424 6.25262C19.3402 5.99053 19.235 5.73982 19.0497 5.55449C18.8644 5.36916 18.6137 5.26403 18.3516 5.26176C18.0896 5.25948 17.8371 5.36023 17.6486 5.54231L11.9943 11.197L6.34004 5.54231C6.15068 5.36473 5.89967 5.26779 5.64011 5.27201C5.38055 5.27622 5.13282 5.38126 4.94932 5.5649C4.76583 5.74854 4.66097 5.99636 4.65694 6.25594C4.65291 6.51552 4.75002 6.76649 4.92772 6.95573L10.581 12.6104L4.92672 18.2651C4.83126 18.3573 4.75511 18.4676 4.70273 18.5895C4.65035 18.7115 4.62277 18.8427 4.62162 18.9754C4.62047 19.1081 4.64576 19.2397 4.69601 19.3626C4.74627 19.4854 4.82049 19.597 4.91433 19.6909C5.00818 19.7847 5.11978 19.859 5.24262 19.9092C5.36545 19.9595 5.49707 19.9848 5.62978 19.9836C5.7625 19.9825 5.89366 19.9549 6.0156 19.9025C6.13755 19.8501 6.24784 19.774 6.34004 19.6785L11.9943 14.0238Z"
        fill="currentColor"
      />
    </Svg>
  )
}

export default CloseIcon
