import { FC } from 'react';

import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import ArrowForwardIcon from '@material-hu/icons/material/ArrowForward';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

export type PageCounterProps = {
  previousPage: () => void;
  nextPage: () => void;
  numPages: number;
  pageNumber: number;
};

export const PageCounter: FC<PageCounterProps> = props => {
  const { previousPage, nextPage, numPages, pageNumber } = props;

  const { t } = useLokaliseTranslation('documents');

  return (
    <Stack
      flexDirection="row"
      alignItems="center"
      justifyContent="center"
      sx={{ mt: 2 }}
    >
      {pageNumber > 1 && (
        <IconButton
          aria-label={t('PREV_PAGE')}
          size="small"
          onClick={previousPage}
        >
          <ArrowBackIcon color="secondary" />
        </IconButton>
      )}
      <Typography
        color="textSecondary"
        variant="subtitle2"
        sx={{ textAlign: 'center' }}
      >
        {t('PAGE_OF', { pageNumber, numPages })}
      </Typography>
      {numPages > pageNumber && (
        <IconButton
          aria-label={t('NEXT_PAGE')}
          size="small"
          onClick={nextPage}
        >
          <ArrowForwardIcon color="secondary" />
        </IconButton>
      )}
    </Stack>
  );
};