"use client";

import { Calendar, Zap } from "lucide-react";

interface Insight { pattern?: string; currentPhase?: string; prediction?: string; peakPeriod?: string; actionItem?: string }

interface Props { insights: Insight[] }

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

  return (
    <div>
      <div className="flex items-center gap-2 mb-3"><Calendar className="w-4 h-4 text-amber-600" /><h2 className="text-xs font-bold uppercase tracking-widest text-slate-400">Seasonal Insights</h2></div>
      <div className="space-y-3">
        {insights.map((ins, i) => (
          <div key={i} className="bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border border-amber-200 px-5 py-4">
            {ins.pattern && <p className="text-sm font-semibold text-slate-900 mb-1">{ins.pattern}</p>}
            <div className="flex items-center gap-3 mb-2 flex-wrap">
              {ins.currentPhase && <span className="text-[10px] font-bold uppercase tracking-wider text-amber-700 bg-amber-100 rounded-full px-2.5 py-0.5">{ins.currentPhase}</span>}
              {ins.peakPeriod && <span className="text-[10px] text-slate-600">Peak: {ins.peakPeriod}</span>}
            </div>
            {ins.prediction && <p className="text-xs text-slate-700 leading-relaxed mb-2">{ins.prediction}</p>}
            {ins.actionItem && (
              <div className="flex items-start gap-2 bg-white/60 rounded-lg px-3 py-2">
                <Zap className="w-3 h-3 text-amber-600 mt-0.5 shrink-0" />
                <p className="text-[11px] text-amber-900 font-medium">{ins.actionItem}</p>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
