'use client'
import type { WidgetStatus } from '@/lib/dashboard-types'

interface WidgetShellProps {
  title: string
  status: WidgetStatus
  n?: number
  children: React.ReactNode
  colSpan?: number
}

export function WidgetShell({ title, status, n, children, colSpan = 6 }: WidgetShellProps) {
  return (
    <div className={`db-widget db-col-${colSpan}`} style={{ gridColumn: `span ${colSpan}` }}>
      <div className="db-widget-header">
        <h3 className="db-widget-title">{title}</h3>
        {n !== undefined && status === 'ok' && (
          <span className="db-widget-n">n = {n.toLocaleString('es-PY')}</span>
        )}
      </div>
      <div className="db-widget-body">
        {status === 'loading' && (
          <div className="db-skeleton-block" aria-label="Cargando…" aria-busy="true" />
        )}
        {status === 'suppressed' && (
          <div className="db-suppressed" role="status">
            <span className="db-suppressed-icon">🔒</span>
            <p>Datos insuficientes</p>
            <p className="db-suppressed-hint">Se necesitan al menos 5 respuestas en este corte.</p>
          </div>
        )}
        {status === 'error' && (
          <div className="db-suppressed" role="alert">
            <p>Error al cargar los datos.</p>
          </div>
        )}
        {status === 'ok' && children}
      </div>
    </div>
  )
}