'use client';

interface BreadcrumbSegment {
  cid: string;
  name: string;
}

interface BreadcrumbsProps {
  path: BreadcrumbSegment[];
  onNavigate: (cid: string) => void;
}

export default function Breadcrumbs({ path, onNavigate }: BreadcrumbsProps) {
  return (
    <nav className="flex items-center flex-wrap gap-1 text-sm">
      <button
        onClick={() => onNavigate(path[0]?.cid ?? '')}
        className="text-surface-400 hover:text-white transition-colors font-medium"
      >
        Root
      </button>
      {path.map((segment, i) => (
        <span key={`${segment.cid}-${i}`} className="flex items-center gap-1">
          <span className="text-surface-600 text-xs">/</span>
          <button
            onClick={() => onNavigate(segment.cid)}
            className={`transition-colors font-mono text-xs ${
              i === path.length - 1
                ? 'text-white'
                : 'text-surface-400 hover:text-white'
            }`}
          >
            {segment.name}
          </button>
        </span>
      ))}
    </nav>
  );
}