import { FunctionComponent } from 'react';
import { useLocale } from 'next-intl';
import { Stack, Typography } from '@mui/material';
import AppButton from '../common/AppButton';

export interface AdminPagerProps {
  page: number;
  pageCount: number;
  onPrev: () => void;
  onNext: () => void;
  /** Already-translated labels — `indicator` is a template string that received {page}/{total}. */
  prevLabel: string;
  nextLabel: string;
  indicator: string;
}

/**
 * Prev/next pager for admin worklists — rendered only when there is more than one page. Locale-aware digits
 * are the caller's job for the indicator; the labels are passed already-translated.
 * @component AdminPager
 */
const AdminPager: FunctionComponent<AdminPagerProps> = ({
  page,
  pageCount,
  onPrev,
  onNext,
  prevLabel,
  nextLabel,
  indicator,
}) => {
  useLocale();
  if (pageCount <= 1) return null;
  return (
    <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center', mt: 1 }}>
      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
        {prevLabel}
      </AppButton>
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {indicator}
      </Typography>
      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
        {nextLabel}
      </AppButton>
    </Stack>
  );
};

export default AdminPager;
