import React from 'react'

interface Props {
  isSortedAsc?: boolean
  isSortedDesc?: boolean
}

const SorterIcon: React.FC<Props> = ({ isSortedAsc, isSortedDesc }) => {
  return (
    <span
      style={{
        marginLeft: '4px'
      }}
    >
      <span
        role="img"
        aria-label="caret-up"
        style={{
          display: 'inline-block',
          fontSize: '11px',
          lineHeight: '5px'
        }}
      >
        <svg
          viewBox="0 0 1024 1024"
          focusable="false"
          className=""
          data-icon="caret-up"
          width="1em"
          height="1em"
          fill={isSortedAsc ? '#478FCD' : '#9b9b9b'}
          aria-hidden="true"
        >
          <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" />
        </svg>
      </span>
      <span
        role="img"
        aria-label="caret-down"
        style={{
          display: 'inline-block',
          fontSize: '11px',
          lineHeight: '5px'
        }}
      >
        <svg
          viewBox="0 0 1024 1024"
          focusable="false"
          className=""
          data-icon="caret-down"
          width="1em"
          height="1em"
          fill={isSortedDesc ? '#478FCD' : '#9b9b9b'}
          aria-hidden="true"
        >
          <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" />
        </svg>
      </span>
    </span>
  )
}

const MemoSorterIcon = React.memo(SorterIcon)

export default MemoSorterIcon