import { Link } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import type { PaginationLink } from '@/components/classrooms/types';

export default function Pagination({ links }: { links: PaginationLink[] }) {
    if (links.length <= 3) {
        return null;
    }

    return (
        <nav
            className="flex flex-wrap items-center gap-1"
            aria-label="Paginazione"
        >
            {links.map((link, index) => (
                <Button
                    key={`${link.label}-${index}`}
                    asChild={link.url !== null}
                    variant={link.active ? 'default' : 'outline'}
                    size="sm"
                    disabled={link.url === null}
                >
                    {link.url !== null ? (
                        <Link
                            href={link.url}
                            preserveScroll
                            dangerouslySetInnerHTML={{ __html: link.label }}
                        />
                    ) : (
                        <span
                            dangerouslySetInnerHTML={{ __html: link.label }}
                        />
                    )}
                </Button>
            ))}
        </nav>
    );
}