import { FC } from 'react'

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

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

const PictureIcon: FC<SvgIconProps> = ({
  isActive = false,
  color,
  width = '32',
  height = '32',
  ...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 32 32" fill="none" color={svgColor} {...props}>
      <Path
        d="M16.0003 15.7336C18.4003 15.7336 20.2669 13.7336 20.2669 11.4669C20.2669 9.20026 18.4003 6.93359 16.0003 6.93359C13.6003 6.93359 11.7336 8.93359 11.7336 11.3336C11.7336 13.7336 13.6003 15.7336 16.0003 15.7336ZM16.0003 9.06693C17.3336 9.06693 18.4003 10.1336 18.4003 11.4669C18.4003 12.8003 17.3336 13.6003 16.0003 13.6003C14.6669 13.6003 13.6003 12.5336 13.6003 11.2003C13.6003 9.86693 14.6669 9.06693 16.0003 9.06693Z"
        fill="currentColor"
      />
      <Path
        d="M25.3336 2.93359H6.66693C4.66693 2.93359 2.93359 4.66693 2.93359 6.66693V25.3336C2.93359 27.3336 4.53359 29.0669 6.66693 29.0669H25.3336C27.3336 29.0669 29.0669 27.4669 29.0669 25.3336V6.66693C29.0669 4.66693 27.3336 2.93359 25.3336 2.93359ZM6.66693 5.06693H25.3336C26.2669 5.06693 26.9336 5.86693 26.9336 6.66693V21.6003H23.6003V21.3336C23.6003 18.9336 21.6003 17.0669 19.3336 17.0669H12.6669C10.2669 17.0669 8.40026 19.0669 8.40026 21.3336V21.6003H5.06693V6.66693C5.06693 5.73359 5.73359 5.06693 6.66693 5.06693ZM10.4003 21.6003V21.3336C10.4003 20.0003 11.4669 18.9336 12.8003 18.9336H19.4669C20.8003 18.9336 21.8669 20.0003 21.8669 21.3336V21.6003H10.4003ZM25.3336 26.9336H6.66693C5.73359 26.9336 5.06693 26.1336 5.06693 25.3336V23.7336H27.0669V25.3336C26.9336 26.2669 26.2669 26.9336 25.3336 26.9336Z"
        fill="currentColor"
      />
    </Svg>
  )
}

export default PictureIcon
