import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination';
import { Link } from '@inertiajs/react';

interface LinkData {
    url: string | null;
    label: string;
    active: boolean;
}

interface PaginationData {
    current_page: number;
    last_page: number;
    links: LinkData[];
    from: number | null;
    to: number | null;
    total: number;
}

interface Props {
    data: PaginationData;
}

export default function AppPagination({ data }: Props) {
    if (data.last_page <= 1) return null;

    const previous = data.links[0];
    const next = data.links[data.links.length - 1];

    const pages = data.links.slice(1, -1);

    return (
        <Pagination>
            <PaginationContent>
                {previous?.url && (
                    <PaginationItem>
                        <PaginationPrevious
                            href={previous.url}
                        />
                    </PaginationItem>
                )}

                {pages.map((item, index) => {
                    if (item.label.includes('...')) {
                        return (
                            <PaginationItem key={`ellipsis-${index}`}>
                                <PaginationEllipsis />
                            </PaginationItem>
                        );
                    }

                    return (
                        <PaginationItem key={item.label}>
                            <PaginationLink
                                isActive={item.active}
                            >
                                <Link href={item.url ?? '#'}>
                                    {item.label}
                                </Link>
                            </PaginationLink>
                        </PaginationItem>
                    );
                })}

                {next?.url && (
                    <PaginationItem>
                        <PaginationNext
                            href={next.url}
                        />
                    </PaginationItem>
                )}
            </PaginationContent>
        </Pagination>
    );
}