"use client";

interface Props {
  title: string;
  mean7d: number;
  annualized: number;
  accent: "cyan" | "violet" | "emerald";
}

const accentMap = {
  cyan: {
    border: "border-cyan-500/30",
    bg: "bg-cyan-500/10",
    text: "text-cyan-400",
    label: "text-cyan-300",
  },
  violet: {
    border: "border-violet-500/30",
    bg: "bg-violet-500/10",
    text: "text-violet-400",
    label: "text-violet-300",
  },
  emerald: {
    border: "border-emerald-500/30",
    bg: "bg-emerald-500/10",
    text: "text-emerald-400",
    label: "text-emerald-300",
  },
};

export default function StatsCard({ title, mean7d, annualized, accent }: Props) {
  const c = accentMap[accent];
  const isPositive = annualized >= 0;

  return (
    <div className={`rounded-xl border ${c.border} ${c.bg} p-5 space-y-3`}>
      <h3 className={`text-sm font-medium ${c.label}`}>{title}</h3>

      <div>
        <p className="text-slate-400 text-xs">预估年化收益率</p>
        <p className={`text-2xl font-bold font-mono mt-0.5 ${isPositive ? c.text : "text-red-400"}`}>
          {annualized >= 0 ? "+" : ""}{annualized.toFixed(2)}%
        </p>
      </div>

      <div className="pt-2 border-t border-slate-700/50">
        <p className="text-slate-400 text-xs">7天均值费率</p>
        <p className={`text-sm font-mono mt-0.5 ${c.text}`}>
          {mean7d >= 0 ? "+" : ""}{mean7d.toFixed(4)}% / 8h
        </p>
      </div>
    </div>
  );
}