"use client";

interface Props {
  title: string;
  mean7d: number;
  annualized: number;
  accent: "blue" | "indigo" | "green";
}

const accentMap = {
  blue: {
    border: "border-blue-200",
    bg: "bg-blue-50",
    text: "text-blue-600",
    label: "text-blue-700",
    divider: "border-blue-100",
  },
  indigo: {
    border: "border-indigo-200",
    bg: "bg-indigo-50",
    text: "text-indigo-600",
    label: "text-indigo-700",
    divider: "border-indigo-100",
  },
  green: {
    border: "border-green-200",
    bg: "bg-green-50",
    text: "text-green-600",
    label: "text-green-700",
    divider: "border-green-100",
  },
};

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-500"}`}>
          {annualized >= 0 ? "+" : ""}{annualized.toFixed(2)}%
        </p>
      </div>

      <div className={`pt-2 border-t ${c.divider}`}>
        <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>
  );
}