"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/cn";

export function Pagination({
  page,
  totalPages,
  onChange,
  totalItems,
  pageSize,
}: {
  page: number;
  totalPages: number;
  onChange: (page: number) => void;
  totalItems: number;
  pageSize: number;
}) {
  if (totalPages <= 1) return null;
  const start = (page - 1) * pageSize + 1;
  const end = Math.min(page * pageSize, totalItems);

  return (
    <div className="flex flex-col gap-3 border-t border-black/[0.06] px-4 py-3.5 dark:border-white/[0.06] sm:flex-row sm:items-center sm:justify-between">
      <p className="text-xs text-muted">
        Showing <span className="font-medium text-ink dark:text-paper">{start}–{end}</span> of{" "}
        <span className="font-medium text-ink dark:text-paper">{totalItems}</span>
      </p>
      <div className="flex items-center gap-1.5">
        <button
          onClick={() => onChange(Math.max(1, page - 1))}
          disabled={page === 1}
          className="flex h-8 w-8 items-center justify-center rounded-lg border border-black/[0.08] disabled:opacity-30 dark:border-white/[0.08]"
        >
          <ChevronLeft size={15} />
        </button>
        {Array.from({ length: totalPages }, (_, i) => i + 1)
          .filter((p) => p === 1 || p === totalPages || Math.abs(p - page) <= 1)
          .map((p, i, arr) => (
            <div key={p} className="flex items-center gap-1.5">
              {i > 0 && arr[i - 1] !== p - 1 && <span className="text-muted">…</span>}
              <button
                onClick={() => onChange(p)}
                className={cn(
                  "flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold",
                  p === page
                    ? "bg-gold text-ink"
                    : "border border-black/[0.08] text-muted dark:border-white/[0.08]"
                )}
              >
                {p}
              </button>
            </div>
          ))}
        <button
          onClick={() => onChange(Math.min(totalPages, page + 1))}
          disabled={page === totalPages}
          className="flex h-8 w-8 items-center justify-center rounded-lg border border-black/[0.08] disabled:opacity-30 dark:border-white/[0.08]"
        >
          <ChevronRight size={15} />
        </button>
      </div>
    </div>
  );
}