import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface BreadcrumbItem {
    label: string;
    href?: string;
}

interface BreadcrumbsProps {
    items: BreadcrumbItem[];
    className?: string;
}

export default function Breadcrumbs({ items, className }: BreadcrumbsProps) {
    return (
        <nav className={cn("flex items-center space-x-2 text-[9px] sm:text-[10px] font-semibold uppercase tracking-[0.2em] text-brand-dark/40 mb-6 px-4 py-2 w-fit", className)}>
            <Link href="/" className="hover:text-brand-accent transition-colors flex items-center gap-2">
                Home
            </Link>
            {items.map((item, index) => (
                <div key={index} className="flex items-center space-x-2">
                    <ChevronRight size={12} className="text-brand-dark/30" />
                    {item.href ? (
                        <Link href={item.href} className="hover:text-brand-dark transition-colors">
                            {item.label}
                        </Link>
                    ) : (
                        <span className="text-brand-accent">{item.label}</span>
                    )}
                </div>
            ))}
        </nav>
    );
}