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

type BreadcrumbProps = {
  path: string;
  onNavigate: (path: string) => void;
  basePath?: string;
};

export const Breadcrumb = ({ path, onNavigate, basePath = '/' }: BreadcrumbProps) => {
  const relativePath = basePath !== '/' && path.startsWith(basePath) ? path.slice(basePath.length) : path;
  const segments = relativePath.split('/').filter(Boolean);

  return (
    <div className="shrink-0 border-b border-duck-dark/10 px-4 py-2">
      <nav className="flex items-center gap-1 text-sm flex-wrap">
        <button
          onClick={() => onNavigate(basePath)}
          className="flex items-center gap-1 text-duck-forest hover:text-duck-teal transition-colors cursor-pointer font-medium"
        >
          <Home className="h-4 w-4" />
          <span>{basePath === '/' ? 'home' : basePath.split('/').pop()}</span>
        </button>

        {segments.map((segment, i) => {
          const relative = '/' + segments.slice(0, i + 1).join('/');
          const segmentPath = basePath === '/' ? relative : basePath + relative;
          const isLast = i === segments.length - 1;

          return (
            <span key={segmentPath} className="flex items-center gap-1">
              <ChevronRight className="h-4 w-4 text-duck-dark/40" />
              {isLast ? (
                <span className="text-duck-dark font-semibold">{segment}</span>
              ) : (
                <button
                  onClick={() => onNavigate(segmentPath)}
                  className="text-duck-forest hover:text-duck-teal transition-colors cursor-pointer font-medium"
                >
                  {segment}
                </button>
              )}
            </span>
          );
        })}
      </nav>
    </div>
  );
};
