import PropTypes from 'prop-types'
import { Button } from 'antd'
import FilterCircleFilledIcon from '../../Icons/FilterCircleFilledIcon'
import FilterCircleIcon from '../../Icons/FilterCircleIcon'

const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => (
  <Button
    icon={
      active ? (
        <FilterCircleFilledIcon style={{ color: 'var(--color-primary)' }} />
      ) : (
        <FilterCircleIcon />
      )
    }
    onClick={onClick}
    type={'default'}
    title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
    {...buttonProps}
  />
)

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

export default FilterSidebarButton
