"use client";

import { Sparkles } from "lucide-react";

interface Prediction { title?: string; description?: string; confidence?: string; timeframe?: string; recommendation?: string }

const CONF_CLS: Record<string, string> = { high: "bg-green-50 text-green-700 border-green-200", medium: "bg-amber-50 text-amber-700 border-amber-200", low: "bg-slate-100 text-slate-600 border-slate-200" };

interface Props { predictions: Prediction[] }

export default function PredictionsPanel({ predictions }: Props) {
  if (!predictions.length) return null;

  return (
    <div className="rounded-2xl overflow-hidden" style={{ background: "linear-gradient(135deg, #1E1B4B, #312E81)" }}>
      <div className="px-6 py-5">
        <div className="flex items-center gap-2 mb-4"><Sparkles className="w-4 h-4 text-violet-300" /><h2 className="text-sm font-bold text-white">Predictive Outlook</h2></div>
        <div className="space-y-3">
          {predictions.map((p, i) => (
            <div key={i} className="bg-white/10 rounded-xl px-4 py-3">
              <div className="flex items-center gap-2 mb-1.5 flex-wrap">
                <span className="text-sm font-semibold text-white">{p.title}</span>
                {p.confidence && <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 border ${CONF_CLS[p.confidence] || CONF_CLS.medium}`}>{p.confidence}</span>}
                {p.timeframe && <span className="text-[9px] text-slate-300 bg-white/10 rounded-full px-2 py-0.5">{p.timeframe}</span>}
              </div>
              {p.description && <p className="text-xs text-slate-300 leading-relaxed mb-2">{p.description}</p>}
              {p.recommendation && (
                <div className="flex items-start gap-2 bg-white/5 rounded-lg px-3 py-2">
                  <Sparkles className="w-3 h-3 text-violet-300 mt-0.5 shrink-0" />
                  <p className="text-[11px] text-violet-200 font-medium">{p.recommendation}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
