import { IconAward } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

export const RankingListFooter = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { palette } = useTheme();

  return (
    <Stack sx={{ position: 'relative' }}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 1,
        }}
      >
        <Divider sx={{ flex: 1 }} />
        <IconAward
          size={20}
          color={palette.new.text.neutral.lighter}
        />
        <Divider sx={{ flex: 1 }} />
      </Stack>
      <Typography
        color="textSecondary"
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
        sx={{ mt: 1, textAlign: 'center' }}
      >
        {t('ranking_end')}
      </Typography>
    </Stack>
  );
};
