Estado vacío.

<section class="ui-sample ui-feedback ui-state" data-empty-state><svg class="ui-state__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v12H4zM8 10h8M8 14h5"></path></svg><div><h3>Todavía no hay documentos</h3><p>Crea el primero para iniciar el flujo de revisión.</p><div class="ui-actions"><a class="btn btn--primary" href="#accion">Crear documento</a></div></div></section>

<section class="ui-sample ui-feedback ui-state border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-empty-state><svg class="ui-state__icon h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v12H4zM8 10h8M8 14h5"></path></svg><div><h3>Todavía no hay documentos</h3><p>Crea el primero para iniciar el flujo de revisión.</p><div class="ui-actions"><a class="btn btn--primary underline underline-offset-4" href="#accion">Crear documento</a></div></div></section>

import type { MouseEventHandler } from "react";

export interface EmptyStateAction {
  /** Texto de la acción; vacío la omite. */
  label: string;
  /** Con `href` la acción es un enlace; sin él, un botón. */
  href?: string;
  /** `primary` para la acción principal (una por vista); `quiet` para una salida secundaria. Por defecto, `secondary`. */
  tone?: "primary" | "secondary" | "quiet";
  /** Se llama al activar la acción; en un enlace, antes de navegar. */
  onClick?: MouseEventHandler<HTMLElement>;
}

export interface EmptyStateProps {
  /** Qué falta, dicho en concreto («Todavía no hay documentos»). */
  title?: string;
  /** Qué hacer para que aparezca contenido. */
  description?: string;
  /** Acciones bajo el texto; una lista vacía no emite la fila y una acción sin texto se omite. */
  actions?: EmptyStateAction[];
  className?: string;
}

const ACCIONES: EmptyStateAction[] = [
  { label: "Crear documento", href: "#accion", tone: "primary" },
];

/**
 * Estado vacío de una lista, tabla o búsqueda sin elementos, con el motivo y las acciones para crear el primero o salir del filtro.
 *
 * Para una lista que nunca tuvo elementos, una acción `primary` que crea el primero; para una búsqueda sin resultados, acciones que quitan filtros.
 *
 * @example <EmptyState />
 * @example <EmptyState title="No hay resultados" description="Quita filtros o prueba otra búsqueda." actions={[{ label: "Limpiar filtros", onClick: limpiar }, { label: "Ver todos", href: "/documentos", tone: "quiet" }]} />
 */
export function EmptyState({
  title = "Todavía no hay documentos",
  description = "Crea el primero para iniciar el flujo de revisión.",
  actions = ACCIONES,
  className,
}: EmptyStateProps) {
  const visibles = actions.filter((accion) => accion.label);
  return (
    <section className={["ui-feedback ui-state", className].filter(Boolean).join(" ")} data-empty-state>
      <svg className="ui-state__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v12H4zM8 10h8M8 14h5"></path></svg>
      <div>
        {title ? <h3>{title}</h3> : null}
        {description ? <p>{description}</p> : null}
        {visibles.length ? (
          <div className="ui-actions">
            {visibles.map((accion, indice) => {
              const clase = `btn btn--${accion.tone ?? "secondary"}`;
              return accion.href !== undefined ? (
                <a className={clase} href={accion.href} onClick={accion.onClick} key={`${accion.label}-${indice}`}>{accion.label}</a>
              ) : (
                <button className={clase} type="button" onClick={accion.onClick} key={`${accion.label}-${indice}`}>{accion.label}</button>
              );
            })}
          </div>
        ) : null}
      </div>
    </section>
  );
}