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

interface PaginationControlProps {
    currentPage: number
    lastPage: number
    total: number
    onPageChange: (page: number) => void
    isLoading?: boolean
}

export function PaginationControl({ currentPage, lastPage, total, onPageChange, isLoading }: PaginationControlProps) {
    return (
        <div className="flex items-center justify-between px-2 py-4">
            <div className="text-sm text-muted-foreground">
                Total: {total} registros
            </div>
            <div className="flex items-center space-x-2">
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => onPageChange(currentPage - 1)}
                    disabled={currentPage <= 1}
                >
                    <ChevronLeft className="h-4 w-4" />
                    <span className="sr-only">Anterior</span>
                </Button>
                <div className="text-sm font-medium">
                    Página {currentPage} de {lastPage}
                </div>
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => onPageChange(currentPage + 1)}
                    disabled={currentPage >= lastPage}
                >
                    <ChevronRight className="h-4 w-4" />
                    <span className="sr-only">Siguiente</span>
                </Button>
            </div>
        </div>
    )
}