"use client";

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

interface Props {
  name: string; currentClicks: number; projectedClicks: number; delta: number;
  effort: string; confidence: string; implementation?: string;
}

const EFFORT_CLS: Record<string, string> = { "quick-win": "bg-green-50 text-green-700", moderate: "bg-amber-50 text-amber-700", major: "bg-red-50 text-red-700" };
const CONF_CLS: Record<string, string> = { high: "bg-green-50 text-green-700", medium: "bg-amber-50 text-amber-700", low: "bg-slate-100 text-slate-600" };

export default function ScenarioCard({ name, currentClicks, projectedClicks, delta, effort, confidence, implementation }: Props) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 px-5 py-4">
      <div className="flex items-center gap-2 mb-3">
        <Zap className="w-4 h-4 text-brand-600" />
        <h3 className="text-sm font-bold text-slate-900 flex-1">{name}</h3>
        <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 ${EFFORT_CLS[effort] || EFFORT_CLS.moderate}`}>{effort}</span>
        <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 ${CONF_CLS[confidence] || CONF_CLS.medium}`}>{confidence}</span>
      </div>
      <div className="flex items-center gap-4 mb-2">
        <div><p className="text-[10px] text-slate-400">Current</p><p className="text-lg font-bold text-slate-700 tabular-nums">{currentClicks.toLocaleString()}</p></div>
        <TrendingUp className="w-5 h-5 text-green-500" />
        <div><p className="text-[10px] text-slate-400">Projected</p><p className="text-lg font-bold text-green-600 tabular-nums">{projectedClicks.toLocaleString()}</p></div>
        <div className="ml-auto bg-green-50 rounded-lg px-3 py-1.5"><p className="text-xs font-bold text-green-700 tabular-nums">+{delta.toLocaleString()}</p><p className="text-[9px] text-green-600">clicks/90d</p></div>
      </div>
      {implementation && <p className="text-xs text-slate-500 mt-2 pt-2 border-t border-slate-100">{implementation}</p>}
    </div>
  );
}
