import React from 'react'
import withDefaults from '../utils/with-defaults'

interface Props {
  size?: number
  color?: string
}

const defaultProps = {
  size: 16,
  color: '#000000'
}

export type SelectIconProps = Props & typeof defaultProps

const ArrowDownIcon: React.FC<SelectIconProps> = ({ size, color }) => {
  return (
    <svg viewBox="0 0 50 50" fill={color} width={size} height={size}>
      <g id="surface1" fill={color}>
        <path
          d="M 6.976563 4.980469 C 6.164063 4.980469 5.433594 5.476563 5.128906 6.230469 C 4.820313 6.984375 5.003906 7.847656 5.585938 8.414063 L 38.171875 41 L 27 41 C 26.277344 40.988281 25.609375 41.367188 25.246094 41.992188 C 24.878906 42.613281 24.878906 43.386719 25.246094 44.007813 C 25.609375 44.632813 26.277344 45.011719 27 45 L 42.707031 45 C 42.921875 45.035156 43.140625 45.035156 43.359375 45 L 45 45 L 45 43.363281 C 45.035156 43.148438 45.035156 42.925781 45 42.707031 L 45 27 C 45.007813 26.460938 44.796875 25.941406 44.414063 25.558594 C 44.03125 25.175781 43.511719 24.964844 42.96875 24.972656 C 41.867188 24.988281 40.984375 25.894531 41 27 L 41 38.171875 L 8.414063 5.585938 C 8.035156 5.199219 7.519531 4.980469 6.976563 4.980469 Z "
          fill={color}
        />
      </g>
    </svg>
  )
}

const MemoSelectIcon = React.memo(ArrowDownIcon)

export default withDefaults(MemoSelectIcon, defaultProps)
