Numbered Pagination

export function Pagination({ page, totalPages, onChange }) {
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
  return (
    <nav className="flex items-center gap-1">
      <button
        onClick={() => onChange(Math.max(1, page - 1))}
        disabled={page === 1}
        className="rounded-md px-2 py-1 text-sm text-slate-500 disabled:opacity-40 hover:bg-slate-100"
      >
        Prev
      </button>
      {pages.map((p) => (
        <button
          key={p}
          onClick={() => onChange(p)}
          className={`h-8 w-8 rounded-md text-sm font-medium
            ${p === page ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`}
        >
          {p}
        </button>
      ))}
      <button
        onClick={() => onChange(Math.min(totalPages, page + 1))}
        disabled={page === totalPages}
        className="rounded-md px-2 py-1 text-sm text-slate-500 disabled:opacity-40 hover:bg-slate-100"
      >
        Next
      </button>
    </nav>
  );
}