Permiso requerido.

<section class="ui-sample ui-service" data-permission-gate="true"><header><strong>Acceso restringido</strong><span>documents:sign</span></header><p>Ingresa con una cuenta autorizada para continuar.</p><a class="btn btn--primary" href="#solicitar">Ingresar</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-permission-gate="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Acceso restringido</strong><span>documents:sign</span></header><p>Ingresa con una cuenta autorizada para continuar.</p><a class="btn btn--primary underline underline-offset-4" href="#solicitar">Ingresar</a></section>

export interface PermissionGateProps {
  /** Título del bloqueo: «Acceso restringido» sin sesión, «Permiso requerido» con sesión y sin el permiso. */
  title?: string;
  /** Permiso que exige la acción, tal como lo nombra el servicio (`documents:sign`); vacío lo oculta. */
  permission?: string;
  /** Qué falta para continuar: ingresar con otra cuenta o pedir el permiso. */
  description?: string;
  /** Destino para ingresar o solicitar acceso; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace: «Ingresar» sin sesión, «Solicitar acceso» con sesión. */
  linkLabel?: string;
  className?: string;
}

/**
 * Bloqueo de una vista o acción que exige un permiso, con el permiso requerido y el enlace para ingresar o solicitarlo; se usa en lugar del contenido cuando la cuenta no puede verlo.
 *
 * Sin sesión, pide ingresar; con sesión y sin el permiso, explica qué no permite el rol y ofrece solicitar acceso. El enlace es la acción principal del bloqueo y va como botón.
 *
 * @example <PermissionGate permission="documents:sign" href="/ingresar" />
 * @example <PermissionGate title="Permiso requerido" description="Tu rol no permite enviar documentos a firma." href="/solicitudes/nueva" linkLabel="Solicitar acceso" />
 */
export function PermissionGate({
  title = "Acceso restringido",
  permission = "documents:sign",
  description = "Ingresa con una cuenta autorizada para continuar.",
  href = "#solicitar",
  linkLabel = "Ingresar",
  className,
}: PermissionGateProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-permission-gate>
      <header>
        <strong>{title}</strong>
        {permission ? <span>{permission}</span> : null}
      </header>
      {description ? <p>{description}</p> : null}
      {href && linkLabel ? <a className="btn btn--primary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}