family_budget/frontend/src/components/Pagination.tsx

interface Props {
  page: number;
  pageSize: number;
  totalItems: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  onPageSizeChange: (size: number) => void;
}

export function Pagination({
  page,
  pageSize,
  totalItems,
  totalPages,
  onPageChange,
  onPageSizeChange,
}: Props) {
  const from = (page - 1) * pageSize + 1;
  const to = Math.min(page * pageSize, totalItems);

  return (
    <div className="pagination">
      <div className="pagination-info">
        {totalItems > 0
          ? `Показано ${from}–${to} из ${totalItems}`
          : 'Нет записей'}
      </div>
      <div className="pagination-controls">
        <select
          className="pagination-size"
          value={pageSize}
          onChange={(e) => onPageSizeChange(Number(e.target.value))}
        >
          <option value={10}>10</option>
          <option value={50}>50</option>
          <option value={100}>100</option>
        </select>
        <button
          className="btn-page"
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
        >
          &larr;
        </button>
        <span className="pagination-current">
          {page} / {totalPages || 1}
        </span>
        <button
          className="btn-page"
          disabled={page >= totalPages}
          onClick={() => onPageChange(page + 1)}
        >
          &rarr;
        </button>
      </div>
    </div>
  );
}