import { router } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type PaginationLink = {
    url: string | null;
    label: string;
    active: boolean;
};

interface PaginationProps {
    links: PaginationLink[];
}

export function Pagination({ links }: PaginationProps) {
    return (
        <div className="flex flex-wrap items-center gap-1">
            {links.map((link, i) => (
                <Button
                    key={i}
                    variant={link.active ? "default" : "outline"}
                    type="button"
                    disabled={!link.url}
                    onClick={() =>
                        link.url &&
                        router.get(
                            link.url,
                            {},
                            { preserveState: true, preserveScroll: true },
                        )
                    }
                    className={cn(
                        "flex h-8 min-w-8 items-center justify-center rounded-lg px-2.5 text-xs font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-40",
                        link.active
                            ? "bg-blue-600 text-white shadow-sm shadow-blue-600/30"
                            : "text-muted-foreground hover:bg-muted",
                    )}
                    dangerouslySetInnerHTML={{ __html: link.label }}
                />
            ))}
        </div>
    );
}