"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";

/** 紧凑上一页 / n / N / 下一页（客户端列表） */
export default function AdminPager({
  page,
  total,
  pageSize,
  onChange,
  loading,
  summary,
  className = "",
}: {
  page: number;
  total: number;
  pageSize: number;
  onChange: (page: number) => void;
  loading?: boolean;
  /** 左侧摘要，默认「第 n / N 页」 */
  summary?: string;
  className?: string;
}) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  if (totalPages <= 1 && total === 0) return null;
  if (totalPages <= 1) return null;

  return (
    <div
      className={`flex items-center justify-between gap-2 px-4 sm:px-5 py-3 ${className}`.trim()}
      style={{ borderTop: "1px solid var(--line)" }}
    >
      <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
        {summary ?? `第 ${page} / ${totalPages} 页`}
      </span>
      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={() => onChange(page - 1)}
          disabled={page <= 1 || loading}
          className="btn btn-line btn-sm"
          aria-label="上一页"
        >
          <ChevronLeft size={14} /> 上一页
        </button>
        <button
          type="button"
          onClick={() => onChange(page + 1)}
          disabled={page >= totalPages || loading}
          className="btn btn-line btn-sm"
          aria-label="下一页"
        >
          下一页 <ChevronRight size={14} />
        </button>
      </div>
    </div>
  );
}