import type { ReactNode } from 'react'

import { Section } from '@/components/Section'

interface Props {
  title: string
  description?: string
  /** Un `Item` por acción, cada uno con su `ConfirmDestructive` a la derecha. */
  children: ReactNode
}

/**
 * `C-1B-4` · La zona de acciones peligrosas, al pie.
 *
 * Existe para sacar lo destructivo del slot `actions` del encabezado, que es
 * una línea de hasta dos controles y donde «Borrar el dominio» queda a un
 * píxel de «Consultar ahora». Acá abajo la acción se lee entera: el nombre en
 * T4, la consecuencia en T5, y el botón `destructive` a la derecha.
 *
 * Es una `Section` con `tone="destructive"`, así que **no dibuja ninguna caja
 * roja**: lo destructivo se distingue por el color del título y por el botón,
 * no por un marco. Una caja de advertencia alrededor de tres acciones se vuelve
 * paisaje a la tercera vez que se entra a la pantalla.
 *
 * Cada hijo es un `Item` con su `ConfirmDestructive`: no hay acción destructiva
 * sin confirmación, y ninguna dice la cantidad de otra forma que no sea en el
 * título de la confirmación («Cerrar las 23 sesiones restantes»).
 */
export function DangerZone({ title, description, children }: Props) {
  return (
    <Section title={{ text: title }} description={description} tone="destructive">
      {/*
        Contenedor a secas y no `ItemGroup`: el grupo declara `role="list"` y
        sus hijos no son elementos de lista, así que un lector de pantalla
        anunciaría una lista de cero elementos delante de las acciones más
        delicadas de la pantalla.
      */}
      <div className="flex flex-col gap-2">{children}</div>
    </Section>
  )
}