import { ChevronRight, Home } from 'lucide-react';

interface BreadCrumbItem {
    label: string;
    icon?: React.ElementType;
    onClick?: () => void;
}

interface BreadCrumbProps {
    items: BreadCrumbItem[];
    separator?: React.ReactNode;
    className?: string;
    showHome?: boolean;
    onHomeClick?: () => void;
}

const BreadCrumb = ({ items, separator, className = '', showHome = true, onHomeClick }: BreadCrumbProps) => {
    const defaultSeparator = <ChevronRight className="w-3.5 h-3.5 text-gray-300" />;

    return (
        <nav className={`flex items-center gap-1.5 text-sm ${className}`} aria-label="Breadcrumb">
            {/* Local keyframes for the staggered entrance animation - scoped to this component */}
            <style>{`
                @keyframes breadcrumbFadeIn {
                    from { opacity: 0; transform: translateX(-6px); }
                    to { opacity: 1; transform: translateX(0); }
                }
                .breadcrumb-item {
                    animation: breadcrumbFadeIn 0.35s ease-out both;
                }
            `}</style>

            {/* Home - Static or clickable */}
            {showHome && (
                <>
                    <button
                        type="button"
                        onClick={onHomeClick}
                        disabled={!onHomeClick}
                        className={`
                            breadcrumb-item flex items-center justify-center w-7 h-7 rounded-full shrink-0
                            bg-primary-light text-primary transition-all duration-200
                            ${onHomeClick ? 'hover:bg-primary hover:text-white cursor-pointer active:scale-90' : 'cursor-default'}
                        `}
                        style={{ animationDelay: '0ms' }}
                    >
                        <Home className="w-3.5 h-3.5" />
                    </button>
                    <span className="breadcrumb-item flex items-center" style={{ animationDelay: '40ms' }}>
                        {separator || defaultSeparator}
                    </span>
                </>
            )}

            {items.map((item, index) => {
                const isLast = index === items.length - 1;
                const Icon = item.icon;
                const isClickable = !!item.onClick && !isLast;
                const delay = (showHome ? 2 : 0) + index * 2;

                return (
                    <div key={index} className="flex items-center gap-1.5">
                        <button
                            type="button"
                            onClick={item.onClick}
                            disabled={!isClickable}
                            className={`
                                breadcrumb-item flex items-center gap-1.5 px-3 py-1.5 rounded-full font-medium
                                transition-all duration-200
                                ${
                                    isLast
                                        ? 'bg-secondary/10 text-secondary font-semibold ring-1 ring-secondary/20 cursor-default'
                                        : isClickable
                                          ? 'bg-gray-100 text-gray-600 hover:bg-primary-light hover:text-primary cursor-pointer active:scale-95'
                                          : 'bg-gray-100 text-gray-500 cursor-default'
                                }
                            `}
                            style={{ animationDelay: `${delay * 40}ms` }}
                        >
                            {Icon && <Icon className="w-3.5 h-3.5" />}
                            {item.label}
                        </button>

                        {!isLast && (
                            <span className="breadcrumb-item flex items-center" style={{ animationDelay: `${(delay + 1) * 40}ms` }}>
                                {separator || defaultSeparator}
                            </span>
                        )}
                    </div>
                );
            })}
        </nav>
    );
};

export default BreadCrumb;