import React from "react";
import { Panel } from "../UI/Panel";

export const KpiCard = ({ label, value, hint }) => {
  return (
    <Panel className="p-5">
      <p className="text-sm text-[var(--color-text-muted)]">{label}</p>
      <div className="mt-3">
        <span className="text-3xl font-semibold">{value}</span>
        {hint && <p className="mt-1 text-xs text-[var(--color-text-muted)]">{hint}</p>}
      </div>
    </Panel>
  );
};