export default function MetricCard({ label, value, detail, tone = "steel" }) {
  const toneClasses = {
    steel: "from-slate-200/10 to-transparent text-slate-100",
    success: "from-emerald-300/[0.15] to-transparent text-emerald-100",
    warning: "from-amber-300/[0.15] to-transparent text-amber-100",
    danger: "from-rose-300/[0.15] to-transparent text-rose-100",
    accent: "from-cyan-300/[0.15] to-transparent text-cyan-100",
  }

  return (
    <div className="surface-card p-5">
      <div className={`absolute inset-x-0 top-0 h-24 bg-gradient-to-br ${toneClasses[tone] || toneClasses.steel}`} />
      <div className="relative">
        <p className="eyebrow">{label}</p>
        <div className="mt-4 flex items-end justify-between gap-4">
          <p className="font-display text-4xl font-semibold tracking-tight text-slate-50">{value}</p>
          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.24em] text-slate-300">
            Live
          </span>
        </div>
        {detail ? <p className="mt-4 text-sm leading-6 text-slate-400">{detail}</p> : null}
      </div>
    </div>
  )
}