import Link from 'next/link';
import { ChevronRight } from 'lucide-react';

import { cn } from '@/lib/utils';

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

/**
 * Gerado manualmente a partir do item de menu ativo em `AppShell` nesta
 * primeira versão (Etapa 14) — automatizar a partir da árvore de rotas do
 * Next é uma melhoria natural de uma etapa futura, quando houver páginas
 * com mais de 2 níveis (ex: detalhe dentro de uma lista).
 */
export function Breadcrumb({ items, className }: { items: BreadcrumbEntry[]; className?: string }) {
  if (items.length === 0) return null;

  return (
    <nav aria-label="Breadcrumb" className={cn('min-w-0', className)}>
      <ol className="flex min-w-0 items-center gap-1.5 text-sm">
        {items.map((item, index) => {
          const last = index === items.length - 1;
          return (
            <li key={`${item.label}-${index}`} className="flex min-w-0 items-center gap-1.5">
              {index > 0 && <ChevronRight className="size-3.5 shrink-0 text-neutral-500" aria-hidden />}
              {item.href && !last ? (
                <Link href={item.href} className="truncate text-neutral-500 hover:text-foreground">
                  {item.label}
                </Link>
              ) : (
                <span
                  className={cn('truncate', last ? 'font-medium text-foreground' : 'text-neutral-500')}
                  aria-current={last ? 'page' : undefined}
                >
                  {item.label}
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}