import { ButtonGroup, Button } from '@material-ui/core';

const SortAnsBar = ({ isMobile, sortBy, setSortBy }) => {
  const handleSortChange = (e) => {
    setSortBy(e.target.innerText.toUpperCase());
  };

  return (
    <div>
      <ButtonGroup
        color="secondary"
        disableElevation
        size={isMobile ? 'small' : 'medium'}
      >
        <Button
          variant={sortBy === 'VOTES' ? 'contained' : 'outlined'}
          onClick={handleSortChange}
        >
          Votes
        </Button>
        <Button
          variant={sortBy === 'NEWEST' ? 'contained' : 'outlined'}
          onClick={handleSortChange}
        >
          Newest
        </Button>
        <Button
          variant={sortBy === 'OLDEST' ? 'contained' : 'outlined'}
          onClick={handleSortChange}
        >
          Oldest
        </Button>
      </ButtonGroup>
    </div>
  );
};

export default SortAnsBar;