"use client";

import { Button } from "@/components/Button";
import type { AdminPaginationMeta } from "@/types/admin";

export function AdminPagination({
  meta,
  onPageChange,
}: {
  meta: AdminPaginationMeta;
  onPageChange: (page: number) => void;
}) {
  if (meta.last_page <= 1) {
    if (meta.total <= 0) {
      return null;
    }
    return <p className="text-[0.75rem] text-ink-40">{meta.total} total</p>;
  }

  const from = (meta.current_page - 1) * meta.per_page + 1;
  const to = Math.min(meta.current_page * meta.per_page, meta.total);

  return (
    <div className="flex flex-wrap items-center justify-between gap-3 rounded-[10px] border border-line/80 bg-surface px-4 py-3 shadow-pv">
      <p className="text-[0.8125rem] text-ink-60">
        <span className="tabular-nums text-primary">
          {from}–{to}
        </span>{" "}
        of <span className="tabular-nums">{meta.total}</span>
      </p>
      <div className="flex items-center gap-2">
        <Button
          type="button"
          variant="secondary"
          size="sm"
          disabled={meta.current_page <= 1}
          onClick={() => onPageChange(meta.current_page - 1)}
          aria-label="Previous page"
        >
          Previous
        </Button>
        <span className="min-w-[4.5rem] text-center text-[0.75rem] tabular-nums text-ink-40">
          {meta.current_page} / {meta.last_page}
        </span>
        <Button
          type="button"
          variant="secondary"
          size="sm"
          disabled={meta.current_page >= meta.last_page}
          onClick={() => onPageChange(meta.current_page + 1)}
          aria-label="Next page"
        >
          Next
        </Button>
      </div>
    </div>
  );
}