import type { ReactNode } from 'react'

import { cn } from '@/lib/utils'

interface Props {
  children: ReactNode
  className?: string
}

/**
 * La columna angosta de las pantallas de tarea.
 *
 * La regla es de ancho y no de contenido: **una pantalla cuyo propósito es
 * completar un formulario o seguir un procedimiento se rinde en columna angosta;
 * una que muestra datos usa el ancho completo.** Sin la pieza, cada pantalla de
 * tarea elegía el suyo —había `max-w-3xl` en dos y `max-w-2xl` en una tercera— y
 * la diferencia parecía un descuido en vez de una decisión.
 *
 * El hueco entre secciones sigue siendo el de `<main>`: 24 px. Acá sólo se
 * recorta el ancho, porque una columna angosta que además cambia el ritmo
 * vertical hace respirar distinto a dos pantallas del mismo producto.
 */
export function TaskColumn({ children, className }: Props) {
  return <div className={cn('flex flex-col gap-6', className)}>{children}</div>
}