import { AlertTriangle } from 'lucide-react'

interface WarningsBannerProps {
  warnings: string[]
}

export function WarningsBanner({ warnings }: WarningsBannerProps) {
  if (warnings.length === 0) return null

  const hasLoop = warnings.some((w) => w.toLowerCase().includes('loop') || w.toLowerCase().includes('ciclo'))

  return (
    <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6">
      <div className="flex items-start gap-3">
        <AlertTriangle className="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />
        <div className="flex-1">
          <p className="text-sm font-semibold text-amber-800 mb-2">
            {warnings.length === 1 ? 'Advertencia del motor de simulación' : `${warnings.length} advertencias del motor de simulación`}
          </p>
          <ul className="space-y-1">
            {warnings.map((w, i) => (
              <li key={i} className="text-sm text-amber-700 leading-relaxed">• {w}</li>
            ))}
          </ul>
          {hasLoop && (
            <p className="text-xs text-amber-600 mt-2 border-t border-amber-200 pt-2">
              <strong>Impacto en los resultados:</strong> Los procesos con ciclos se calculan asumiendo una sola ejecución del loop.
              Los costos reales pueden ser mayores si el loop se repite múltiples veces en cada instancia del proceso.
              Para modelado probabilístico de loops, se implementará distribuciones en V1.0.
            </p>
          )}
        </div>
      </div>
    </div>
  )
}
