'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AppButton from '../AppButton';
import { formatNumber } from '@/utils';

export interface PagerProps {
  page: number;
  pageCount: number;
  onPrev: () => void;
  onNext: () => void;
}

/**
 * The shared prev/next pager for a paginated list — locale-digit "page X of Y", disabled at either edge,
 * renders nothing for a single page. Replaces the near-identical inline pagers hand-rolled per list
 * screen (earnings, payout history, the nurse inbox tabs).
 * @component Pager
 */
const Pager: FunctionComponent<PagerProps> = ({ page, pageCount, onPrev, onNext }) => {
  const t = useTranslations('common');
  const locale = useLocale();
  if (pageCount <= 1) return null;
  const fmt = (n: number) => formatNumber(n, locale);

  return (
    <Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'center' }}>
      <AppButton variant="text" color="primary" onClick={onPrev} disabled={page <= 1}>
        {t('page_prev')}
      </AppButton>
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {t('page_indicator', { page: fmt(page), total: fmt(pageCount) })}
      </Typography>
      <AppButton variant="text" color="primary" onClick={onNext} disabled={page >= pageCount}>
        {t('page_next')}
      </AppButton>
    </Stack>
  );
};

export default Pager;
