import { Icon } from "./Icon";

type Props = {
  label: string;
  value: string | number;
  hint?: string;
  icon?: string;
  /** Farbe des dezenten Glow-Kreises. */
  glow?: string;
  delay?: number;
};

export function StatCard({ label, value, hint, icon, glow = "var(--blue)", delay = 0 }: Props) {
  return (
    <div className="card stat-card card-hover" data-reveal data-reveal-delay={delay}>
      <span className="stat-glow" style={{ background: glow }} />
      <div className="relative flex items-start justify-between">
        <span className="stat-label">{label}</span>
        {icon ? (
          <span className="text-muted opacity-80">
            <Icon name={icon} size={18} />
          </span>
        ) : null}
      </div>
      <div className="relative mt-3 stat-value">{value}</div>
      {hint ? <div className="relative mt-1 text-xs text-muted">{hint}</div> : null}
    </div>
  );
}