import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

export const RankingHeader = () => {
  const { t } = useLokaliseTranslation('acknowledgements');

  return (
    <Stack
      sx={{
        pr: 2,
        pl: 1.5,
        py: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}
    >
      <Typography
        color="textSecondary"
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
      >
        {t('users:position')}
      </Typography>
      <Typography
        color="textSecondary"
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
      >
        {t('apps:acknowledgements_points')}
      </Typography>
    </Stack>
  );
};
