import { FC } from 'react'

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

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

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

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

  return (
    <Svg width={width} height={height} viewBox="0 0 33 33" color={svgColor} fill="none" {...props}>
      <Path
        d="M16.6355 16.2043C19.0355 16.2043 20.9022 14.2043 20.9022 11.9376C20.9022 9.67096 19.0355 7.4043 16.6355 7.4043C14.2355 7.4043 12.3688 9.4043 12.3688 11.8043C12.3688 14.2043 14.2355 16.2043 16.6355 16.2043ZM16.6355 9.53763C17.9688 9.53763 19.0355 10.6043 19.0355 11.9376C19.0355 13.271 17.9688 14.071 16.6355 14.071C15.3022 14.071 14.2355 13.0043 14.2355 11.671C14.2355 10.3376 15.3022 9.53763 16.6355 9.53763Z"
        fill="currentColor"
      />
      <Path
        d="M25.9688 3.4043H7.30218C5.30218 3.4043 3.56885 5.13763 3.56885 7.13763V25.8043C3.56885 27.8043 5.16885 29.5376 7.30218 29.5376H25.9688C27.9688 29.5376 29.7022 27.9376 29.7022 25.8043V7.13763C29.7022 5.13763 27.9688 3.4043 25.9688 3.4043ZM7.30218 5.53763H25.9688C26.9022 5.53763 27.5688 6.33763 27.5688 7.13763V22.071H24.2355V21.8043C24.2355 19.4043 22.2355 17.5376 19.9688 17.5376H13.3022C10.9022 17.5376 9.03551 19.5376 9.03551 21.8043V22.071H5.70218V7.13763C5.70218 6.2043 6.36885 5.53763 7.30218 5.53763ZM11.0355 22.071V21.8043C11.0355 20.471 12.1022 19.4043 13.4355 19.4043H20.1022C21.4355 19.4043 22.5022 20.471 22.5022 21.8043V22.071H11.0355ZM25.9688 27.4043H7.30218C6.36885 27.4043 5.70218 26.6043 5.70218 25.8043V24.2043H27.7022V25.8043C27.5688 26.7376 26.9022 27.4043 25.9688 27.4043Z"
        fill="currentColor"
      />
    </Svg>
  )
}

export default ImageIcon