/* ─────────────────────────────────────────────────────────────────────────────
 * NO REESTRUCTURAR ESTE ARCHIVO.
 *
 * La disposición viene del bloque `dashboard-01` de shadcn y la eligió el dueño
 * del producto. Ya se rompió dos veces por reescribirla «mejor».
 *
 * Permitido: cambiar el CONTENIDO —entradas, rótulos, textos, íconos, destinos—.
 * Prohibido sin pedirlo: cambiar la anatomía —qué regiones existen, el `variant`,
 * las medidas, el orden de header / content / footer— o reemplazar los
 * componentes del bloque por primitivas escritas a mano.
 *
 * Si creés que la estructura tiene que cambiar, preguntá antes.
 * ───────────────────────────────────────────────────────────────────────────── */

import { Link } from "@inertiajs/react"

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"

/**
 * Grupo con rótulo, para lo que se configura de vez en cuando.
 *
 * El bloque traía un menú de tres puntos por fila —abrir, compartir, borrar— y
 * una fila «More». Acá no aplica ninguno: son pantallas de la cuenta, no
 * documentos, y un menú con acciones que no existen es peor que no tenerlo
 * (RT-07). Lo que sí se conserva es el grupo con su rótulo, que es lo que
 * separa visualmente un bloque de otro.
 */
export function NavDocuments({
  label,
  items,
  className,
}: {
  label: string
  items: {
    title: string
    url: string
    icon?: React.ReactNode
    isActive?: boolean
  }[]
  /** Para empujar el grupo al pie con `mt-auto`, que es de dónde cuelga lo de la cuenta. */
  className?: string
}) {
  if (items.length === 0) return null

  return (
    <SidebarGroup className={cn("group-data-[collapsible=icon]:hidden", className)}>
      <SidebarGroupLabel>{label}</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.title}>
            <SidebarMenuButton asChild isActive={item.isActive}>
              <Link href={item.url} aria-current={item.isActive ? "page" : undefined}>
                {item.icon}
                <span>{item.title}</span>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}