import { Link } from 'react-router-dom';
import { ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

export type BreadcrumbItem = {
    label: string;
    href?: string;
};

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

export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
    if (items.length === 0) return null;

    return (
        <nav aria-label="Хлебные крошки" className={cn('flex flex-wrap items-center gap-1 text-sm text-muted-foreground', className)}>
            {items.map((item, index) => {
                const isLast = index === items.length - 1;
                return (
                    <span key={`${item.label}-${index}`} className="inline-flex items-center gap-1">
                        {index > 0 && <ChevronRight className="h-3.5 w-3.5 opacity-60" />}
                        {item.href && !isLast ? (
                            <Link to={item.href} className="hover:text-foreground hover:underline underline-offset-4">
                                {item.label}
                            </Link>
                        ) : (
                            <span className={cn(isLast && 'font-medium text-foreground')}>{item.label}</span>
                        )}
                    </span>
                );
            })}
        </nav>
    );
}