import React from 'react';

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

export const Breadcrumbs: React.FC<{ items: BreadcrumbItem[]; onNavigate?: (href: string) => void; }> = ({ items, onNavigate }) => (
    <nav className="text-sm text-[--text-secondary]" aria-label="Breadcrumb">
        <ol className="flex flex-wrap items-center gap-1">
            {items.map((item, i) => (
                <li key={i} className="flex items-center">
                    {item.href ? (
                        <button
                            onClick={() => onNavigate?.(item.href!)}
                            className="text-blue-600 hover:underline dark:text-blue-400"
                        >{item.label}</button>
                    ) : (
                        <span className="text-[--text-primary] font-medium">{item.label}</span>
                    )}
                    {i < items.length - 1 && <span className="mx-2 text-[--border-color]">/</span>}
                </li>
            ))}
        </ol>
    </nav>
);

export default Breadcrumbs;