import React from "react";
import { Link } from "@inertiajs/react";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/Components/ui/breadcrumb";

export interface BreadcrumbItemType {
    label: string;
    href?: string;
    isPage?: boolean;
}

interface BreadcrumbNavProps {
    items: BreadcrumbItemType[];
    className?: string;
}

const BreadcrumbNav = ({ items, className }: BreadcrumbNavProps) => {
    return (
        <Breadcrumb className={className}>
            <BreadcrumbList>
                {items.map((item, index) => (
                    <React.Fragment key={index}>
                        <BreadcrumbItem>
                            {item.isPage ? (
                                <BreadcrumbPage className="text-gray-500">{item.label}</BreadcrumbPage>
                            ) : (
                                <BreadcrumbLink asChild>
                                    <Link
                                        href={item.href || "#"}
                                        className="text-[#01ab83] hover:text-[#018a6a] font-medium transition-colors"
                                    >
                                        {item.label}
                                    </Link>
                                </BreadcrumbLink>
                            )}
                        </BreadcrumbItem>
                        {index < items.length - 1 && <BreadcrumbSeparator />}
                    </React.Fragment>
                ))}
            </BreadcrumbList>
        </Breadcrumb>
    );
};

export default BreadcrumbNav;