"use client";

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

import { Button } from "@/components/ui/button";
import type { PaginationMeta } from "@/types/api";

type PaginationControlsProps = {
  pagination?: PaginationMeta | null;
  loading?: boolean;
  onPageChange: (page: number) => void;
};

export function PaginationControls({ pagination, loading, onPageChange }: PaginationControlsProps) {
  if (!pagination) return null;

  const currentPage = pagination.page ?? 1;
  const totalPages = pagination.totalPages ?? 1;
  const previousPage = pagination.previousPage ?? (currentPage > 1 ? currentPage - 1 : null);
  const nextPage = pagination.nextPage ?? (currentPage < totalPages ? currentPage + 1 : null);

  return (
    <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border/70 bg-card/60 p-3">
      <div className="text-sm text-muted-foreground">
        Page {currentPage} of {totalPages} · Total {pagination.total}
      </div>
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          disabled={loading || !previousPage}
          onClick={() => previousPage && onPageChange(previousPage)}
        >
          <ChevronRight className="h-4 w-4" />
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          disabled={loading || !nextPage}
          onClick={() => nextPage && onPageChange(nextPage)}
        >
          Next
          <ChevronLeft className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}