import type { ReactNode } from "react";

type StatCardProps = {
  label: string;
  value: ReactNode;
  hint?: string;
  highlight?: boolean;
};

export function StatCard({ label, value, hint, highlight }: StatCardProps) {
  return (
    <div
      className={
        highlight
          ? "rounded-lg border border-l-2 border-muted/30 border-l-accent/70 bg-surface p-4"
          : "rounded-lg border border-muted/40 bg-surface px-3 py-2.5"
      }
    >
      <div className={highlight ? "text-xs font-medium uppercase tracking-widest text-fg/50" : "text-xs text-fg/55"}>
        {label}
      </div>
      <div className={highlight ? "mt-1.5 text-2xl font-bold text-fg" : "mt-0.5 text-base font-semibold text-fg"}>{value}</div>
      {hint ? <div className="mt-1 text-xs text-fg/50">{hint}</div> : null}
    </div>
  );
}