Dynamic Breadcrumb Component

interface BreadcrumbProps {
  items: { label: string; href?: string }[];
  separator?: string;
}

export function Breadcrumb({ items, separator = '/' }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className="text-sm text-gray-400">
      <ol className="flex items-center gap-2">
        {items.map((item, i) => (
          <li key={i} className="flex items-center gap-2">
            {i > 0 && <span className="text-gray-600">{separator}</span>}
            {item.href && i < items.length - 1 ? (
              <a href={item.href} className="hover:text-white transition-colors">
                {item.label}
              </a>
            ) : (
              <span className="text-white">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

export function pathToBreadcrumbs(path: string): { label: string; href: string }[] {
  const segments = path.split('/').filter(Boolean);
  return segments.map((segment, i) => ({
    label: segment.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
    href: '/' + segments.slice(0, i + 1).join('/'),
  }));
}