const MetricCard = ({ label, value, detail, icon: Icon }) => (
  <div className="glass-panel group p-4 transition hover:-translate-y-0.5 hover:border-cyan-400/25">
    <div className="mb-5 flex items-start justify-between">
      <span className="text-[10px] uppercase tracking-[.16em] text-slate-500">{label}</span>
      <Icon className="h-4 w-4 text-cyan-400" />
    </div>
    <div className="text-2xl font-light text-white">{value}</div>
    <div className="mt-1 text-xs text-slate-500">{detail}</div>
  </div>
);
export default MetricCard;