import { currency } from "@/lib/format";

export function SummaryCard({
  label,
  value,
  detail
}: {
  label: string;
  value: string | number;
  detail?: string;
}) {
  return (
    <div className="panel p-4">
      <p className="label">{label}</p>
      <p className="mt-3 text-xl font-semibold text-ink">
        {typeof value === "number" ? currency(value) : value}
      </p>
      {detail ? <p className="mt-1 text-xs text-slate-500">{detail}</p> : null}
    </div>
  );
}