import PropTypes from 'prop-types'
import { Button } from 'antd'
import SortCircleFilledIcon from '../../Icons/SortCircleFilledIcon'
import SortCircleIcon from '../../Icons/SortCircleIcon'

const SortSidebarButton = ({ active, onClick, ...buttonProps }) => (
  <Button
    icon={
      active ? (
        <SortCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
      ) : (
        <SortCircleIcon />
      )
    }
    onClick={onClick}
    type={'default'}
    title={active ? 'Hide sort sidebar' : 'Show sort sidebar'}
    {...buttonProps}
  />
)

SortSidebarButton.propTypes = {
  active: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired
}

export default SortSidebarButton
