"use client";

interface PaginationProps {
  offset: number;
  limit: number;
  total: number;
  onPageChange: (newOffset: number) => void;
}

export function Pagination({ offset, limit, total, onPageChange }: PaginationProps) {
  const currentPage = Math.floor(offset / limit) + 1;
  const totalPages = Math.max(1, Math.ceil(total / limit));

  if (totalPages <= 1) return null;

  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "var(--nl-space-3)", padding: "var(--nl-space-4) 0" }}>
      <button
        disabled={currentPage <= 1}
        onClick={() => onPageChange(Math.max(0, offset - limit))}
        className="surface-muted"
        style={{ padding: "6px 14px", border: "none", fontSize: "var(--nl-fs-sm)" }}
      >
        Previous
      </button>
      <span style={{ fontSize: "var(--nl-fs-sm)", color: "var(--nl-text-secondary)" }}>
        Page {currentPage} of {totalPages}
      </span>
      <button
        disabled={currentPage >= totalPages}
        onClick={() => onPageChange(offset + limit)}
        className="surface-muted"
        style={{ padding: "6px 14px", border: "none", fontSize: "var(--nl-fs-sm)" }}
      >
        Next
      </button>
    </div>
  );
}