"use client";

import { Sparkles, Globe, BarChart3, Zap } from "lucide-react";

interface Props {
  summary: string;
  industry: string;
  locations: string[];
  trendCount: number;
  eventCount: number;
  predictionCount: number;
  generatedAt: string;
}

export default function BriefingSummary({ summary, industry, locations, trendCount, eventCount, predictionCount, generatedAt }: Props) {
  return (
    <div className="rounded-2xl overflow-hidden" style={{ background: "linear-gradient(135deg, #0B1120, #1E293B)" }}>
      <div className="px-7 py-7">
        <div className="flex items-center gap-2 mb-4">
          <div className="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center"><Sparkles className="w-4 h-4 text-violet-300" /></div>
          <div>
            <h2 className="text-sm font-bold text-white">Today&apos;s Intelligence Briefing</h2>
            <p className="text-[11px] text-slate-400">{industry} · {locations.join(", ")} · {new Date(generatedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</p>
          </div>
        </div>
        <p className="text-base text-slate-200 leading-relaxed mb-6" style={{ lineHeight: 1.7 }}>{summary}</p>
        <div className="grid grid-cols-3 gap-3">
          <StatBadge icon={Globe} label="Market Trends" value={trendCount} color="text-emerald-400" />
          <StatBadge icon={Zap} label="Events Detected" value={eventCount} color="text-amber-400" />
          <StatBadge icon={BarChart3} label="Predictions" value={predictionCount} color="text-violet-400" />
        </div>
      </div>
    </div>
  );
}

function StatBadge({ icon: Icon, label, value, color }: { icon: typeof Globe; label: string; value: number; color: string }) {
  return (
    <div className="bg-white/5 rounded-xl px-4 py-3">
      <Icon className={`w-3.5 h-3.5 ${color} mb-1`} />
      <p className="text-xl font-bold text-white tabular-nums">{value}</p>
      <p className="text-[10px] text-slate-400 uppercase tracking-widest">{label}</p>
    </div>
  );
}
