import { Link } from '@inertiajs/react';
import { ChevronDown } from 'lucide-react';
import { Fragment } from 'react';
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';

export function Breadcrumbs({
    breadcrumbs,
}: {
    breadcrumbs: BreadcrumbItemType[];
}) {
    return (
        <>
            {breadcrumbs.length > 0 && (
                <Breadcrumb>
                    <BreadcrumbList>
                        {breadcrumbs.map((item, index) => {
                            const isLast = index === breadcrumbs.length - 1;

                            return (
                                <Fragment key={index}>
                                    <BreadcrumbItem>
                                        {item.options ? (
                                            <DropdownMenu>
                                                <DropdownMenuTrigger className="flex cursor-pointer items-center gap-1 text-sm font-medium transition-colors outline-none hover:text-foreground">
                                                    <span>{item.title}</span>
                                                    <ChevronDown className="h-3 w-3 opacity-60" />
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent
                                                    align="start"
                                                    className="min-w-37.5 rounded-lg"
                                                >
                                                    {item.options.map((opt) => (
                                                        <DropdownMenuItem
                                                            key={opt.href}
                                                            asChild
                                                        >
                                                            <Link
                                                                href={opt.href}
                                                                className="w-full cursor-pointer"
                                                            >
                                                                {opt.title}
                                                            </Link>
                                                        </DropdownMenuItem>
                                                    ))}
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        ) : isLast ? (
                                            <BreadcrumbPage>
                                                {item.title}
                                            </BreadcrumbPage>
                                        ) : (
                                            <BreadcrumbLink asChild>
                                                {item.href ? (
                                                    <Link href={item.href}>
                                                        {item.title}
                                                    </Link>
                                                ) : (
                                                    <span>{item.title}</span>
                                                )}
                                            </BreadcrumbLink>
                                        )}
                                    </BreadcrumbItem>
                                    {!isLast && <BreadcrumbSeparator />}
                                </Fragment>
                            );
                        })}
                    </BreadcrumbList>
                </Breadcrumb>
            )}
        </>
    );
}