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 ArrowUpIcon: React.FC<SelectIconProps> = ({ size, color }) => {
  return (
    <svg viewBox="0 0 50 50" version="1.1" fill={color} width={size} height={size}>
      <g id="surface1" fill={color}>
        <path
          d="M 42.960938 4.980469 C 42.886719 4.984375 42.8125 4.988281 42.738281 5 L 27 5 C 26.277344 4.988281 25.609375 5.367188 25.246094 5.992188 C 24.878906 6.613281 24.878906 7.386719 25.246094 8.007813 C 25.609375 8.632813 26.277344 9.011719 27 9 L 38.171875 9 L 5.585938 41.585938 C 5.0625 42.085938 4.851563 42.832031 5.035156 43.535156 C 5.21875 44.234375 5.765625 44.78125 6.464844 44.964844 C 7.167969 45.148438 7.914063 44.9375 8.414063 44.414063 L 41 11.828125 L 41 23 C 40.988281 23.722656 41.367188 24.390625 41.992188 24.753906 C 42.613281 25.121094 43.386719 25.121094 44.007813 24.753906 C 44.632813 24.390625 45.011719 23.722656 45 23 L 45 7.242188 C 45.023438 7.066406 45.023438 6.890625 45 6.710938 L 45 5 L 43.292969 5 C 43.183594 4.984375 43.070313 4.976563 42.960938 4.980469 Z "
          fill={color}
        />
      </g>
    </svg>
  )
}

const MemoSelectIcon = React.memo(ArrowUpIcon)

export default withDefaults(MemoSelectIcon, defaultProps)