/* ─────────────────────────────────────────────────────────────────────────────
 * 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.
 *
 * Ya se preguntó dos veces, y las dos las decidió el dueño del producto:
 *
 * - El estado de la cuenta vive en el extremo derecho (D7). Es un slot con
 *   dueño, no un agregado suelto: no lo saques por parecerte de más.
 * - Esta franja **no lleva el `<h1>` ni las acciones de la pantalla** (D8). Las
 *   dos cosas bajaron a `PageHeading`.
 * ───────────────────────────────────────────────────────────────────────────── */

import { AccountStatus } from "@/components/AccountStatus"
import { WorkInProgress } from "@/components/WorkInProgress"
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"
import { t } from "@/lib/i18n"
import type { ReactNode } from "react"


/**
 * La franja de arriba: **navegación y estado de la cuenta, nada más**.
 *
 * Dice dónde estás; qué es esta pantalla lo dice `PageHeading`, abajo, con su
 * título y sus acciones (D8). Por eso el nombre de la vista acá **no** es un
 * `<h1>`: un localizador de navegación no es el titular de la página, y tenerlo
 * como encabezado dejaba a las trece vistas sin ninguno propio en el contenido.
 *
 * Tampoco recibe acciones. Un botón en la barra de navegación se lee como una
 * acción del producto y no de la pantalla: era «Agregar dominio» flotando arriba
 * a la derecha, lejos de la lista sobre la que actúa.
 *
 * El extremo derecho es **siempre** el estado de la cuenta y nunca otra cosa. Si
 * se corriera según lo que tenga la vista, dejaría de aprenderse dónde mirar,
 * que es todo lo que ese indicador compra (D7).
 */
export function SiteHeader({ title, breadcrumb }: { title: string; breadcrumb?: ReactNode }) {
  return (
    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="mx-2 data-[orientation=vertical]:h-4"
        />
        <nav aria-label={t("nav.whereYouAre")}>
          {breadcrumb ?? <span className="truncate text-base font-medium">{title}</span>}
        </nav>

        {/* El trabajo en curso queda a la izquierda del estado de la cuenta: el
            último lugar es siempre el mismo, pase lo que pase (D7). */}
        <div className="ml-auto flex items-center gap-1">
          <WorkInProgress />
          <AccountStatus />
        </div>
      </div>
    </header>
  )
}