Navegación principal.

<nav class="ui-sample ui-nav" aria-label="Navegación principal"><a href="#inicio">Inicio</a><a href="#actual" aria-current="page">Documentación</a><a href="#productos">Productos</a><a href="#contacto">Contacto</a></nav>

<nav class="ui-sample ui-nav border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" aria-label="Navegación principal"><a class="underline underline-offset-4" href="#inicio">Inicio</a><a class="underline underline-offset-4" href="#actual" aria-current="page">Documentación</a><a class="underline underline-offset-4" href="#productos">Productos</a><a class="underline underline-offset-4" href="#contacto">Contacto</a></nav>

export interface PrimaryNavItem {
  label: string;
  href: string;
  /** Marca la página actual con `aria-current="page"`. */
  current?: boolean;
}

const ITEMS: PrimaryNavItem[] = [
  { label: "Inicio", href: "#inicio" },
  { label: "Documentación", href: "#actual", current: true },
  { label: "Productos", href: "#productos" },
  { label: "Contacto", href: "#contacto" },
];

export interface PrimaryNavProps {
  /** Enlaces de la navegación, en orden; uno con `current`. */
  items?: PrimaryNavItem[];
  /** Nombre accesible de la navegación (`aria-label`). */
  label?: string;
  className?: string;
}

/**
 * Navegación principal del sitio, en la cabecera: enlaces a las secciones de primer nivel, con la página actual marcada.
 *
 * @example <PrimaryNav items={[{ label: "Inicio", href: "/" }, { label: "Servicios", href: "/servicios", current: true }]} />
 */
export function PrimaryNav({ items = ITEMS, label = "Navegación principal", className }: PrimaryNavProps) {
  if (!items.length) return null;
  return (
    <nav className={["ui-nav", className].filter(Boolean).join(" ")} aria-label={label}>
      {items.map((item, i) => (
        <a key={i} href={item.href} aria-current={item.current ? "page" : undefined}>{item.label}</a>
      ))}
    </nav>
  );
}