import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";

export type PaginationSimpleProps = {
  total: number;
  current: number;
  onPageChange?: (page: number) => void;
};

export function PaginationSimple({
  total,
  current,
  onPageChange
}: PaginationSimpleProps) {
  const pages = Array.from({ length: total }, (_, index) => index + 1);
  const goTo = (page: number) => {
    if (page < 1 || page > total || page === current) return;
    onPageChange?.(page);
  };

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        variant="outline"
        size="sm"
        onClick={() => goTo(current - 1)}
        disabled={current === 1}
      >
        <ChevronLeft className="mr-1 h-4 w-4" />
        Anterior
      </Button>

      {pages.map((page) => (
        <Button
          key={page}
          size="icon"
          variant={page === current ? "default" : "outline"}
          onClick={() => goTo(page)}
        >
          {page}
        </Button>
      ))}

      <Button
        variant="outline"
        size="sm"
        onClick={() => goTo(current + 1)}
        disabled={current === total}
      >
        Siguiente
        <ChevronRight className="ml-1 h-4 w-4" />
      </Button>
    </div>
  );
}