import ButtonGroup from '../shared/buttons/button-group';
import NavLink from '../shared/buttons/nav-link';
import { useParams } from 'react-router-dom';

function RankingTab() {
  const { rankType } = useParams();

  return (
    <ButtonGroup className='mx-auto mb-16 w-min'>
      <NavLink to='/ranking/daily' color={rankType === 'daily' ? 'blue' : 'gray'}>
        روزانه
      </NavLink>
      <NavLink to='/ranking/weekly' color={rankType === 'weekly' ? 'blue' : 'gray'}>
        هفتگی
      </NavLink>
      <NavLink to='/ranking/monthly' color={rankType === 'monthly' ? 'blue' : 'gray'}>
        ماهانه
      </NavLink>
      <NavLink to='/ranking' color={rankType ? 'gray' : 'blue'}>
        کلی
      </NavLink>
    </ButtonGroup>
  );
}

export default RankingTab;