import NavLink from '../shared/buttons/nav-link';
import PropTypes from 'prop-types';
import ButtonGroup from '../shared/buttons/button-group';

function TopStudentScoreButtons(props) {
  const { rankType, number } = props;

  return (
    <ButtonGroup className='mx-auto mt-10 w-min'>
      {!props.disableNext && (
        <NavLink to={`/top-student-scores/${rankType}/${number + 1}`} content='بعدی' color='gray' />
      )}
      {number > 1 && (
        <NavLink to={`/top-student-scores/${rankType}/${number - 1}`} content='قبلی' color='gray' />
      )}
    </ButtonGroup>
  );
}

TopStudentScoreButtons.propTypes = {
  number: PropTypes.number.isRequired,
  rankType: PropTypes.string.isRequired,
  disableNext: PropTypes.bool.isRequired
};

export default TopStudentScoreButtons;
