import { useTranslation } from 'react-i18next'
import { Button } from './button'

/** Простой пейджер «‹ N / M ›». Ничего не рисует, если страница одна. */
export function Pager({
  page,
  totalPages,
  onChange,
}: Readonly<{
  page: number
  totalPages: number
  onChange: (page: number) => void
}>) {
  const { t } = useTranslation()
  if (totalPages <= 1) return null

  return (
    <div className="flex items-center justify-center gap-2 text-sm">
      <Button
        size="sm"
        variant="outline"
        disabled={page <= 1}
        onClick={() => onChange(page - 1)}
        aria-label={t('common.prevPage')}
      >
        ‹
      </Button>
      <span className="tabular-nums text-muted-foreground">
        {page} / {totalPages}
      </span>
      <Button
        size="sm"
        variant="outline"
        disabled={page >= totalPages}
        onClick={() => onChange(page + 1)}
        aria-label={t('common.nextPage')}
      >
        ›
      </Button>
    </div>
  )
}
