// components/StatCard.tsx
// Surfacing KPI tile used on the dashboard. White card on white
// canvas — separation comes from the 1px hairline border + a single
// colored accent (Rausch) on the eyebrow line. No purple-gradient
// wash; no emoji; no left-stripe decoration.

import { ReactNode } from "react";

interface StatCardProps {
  label: string;
  value: ReactNode;
  hint?: ReactNode;
  accent?: boolean;
}

export default function StatCard({ label, value, hint, accent = false }: StatCardProps) {
  return (
    <div
      data-od-id="stat-card"
      className="bg-surface border border-border rounded-lg p-6 flex flex-col gap-3"
    >
      <div className="flex items-center gap-2">
        <span
          aria-hidden="true"
          className={
            "inline-block w-2 h-2 rounded-pill " +
            (accent ? "bg-accent" : "bg-border")
          }
        />
        <span className="text-xs uppercase tracking-[0.08em] text-muted font-semibold">
          {label}
        </span>
      </div>
      <div className="text-4xl font-bold text-fg leading-tight">{value}</div>
      {hint ? <div className="text-sm text-muted">{hint}</div> : null}
    </div>
  );
}