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

import { colors } from '../Colors'
import { SvgIconProps } from '../components/SvgIcon'

export function SearchIcon(
  props: SvgIconProps & { strokeWidth?: number }
): React.ReactElement {
  const { stroke = colors.white, strokeWidth = 2, size = 32, style } = props

  return (
    <Svg
      style={style}
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
    >
      <Path
        d="M14.5 25C20.299 25 25 20.299 25 14.5C25 8.70101 20.299 4 14.5 4C8.70101 4 4 8.70101 4 14.5C4 20.299 8.70101 25 14.5 25Z"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <Path
        d="M21.925 21.925L28 28"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  )
}