import { Card } from "./Card.jsx";

export function KpiCard({ icon: Icon, label, sub, tone = "primary", unit, value }) {
  return (
    <Card className="kpi-card" component="article">
      <div className="kpi-card__top">
        <div className="kpi-card__label">{label}</div>
        <div className={`metric-icon metric-icon--${tone}`}>
          <Icon fontSize="small" />
        </div>
      </div>
      <div className="kpi-value">
        {value}
        {unit ? <span>{unit}</span> : null}
      </div>
      <div className="kpi-sub">{sub}</div>
    </Card>
  );
}
