import { cn } from "@/lib/utils";

type StatProps = {
  label: string;
  value: number | string;
  suffix?: string;
  hint?: string;
  className?: string;
};

export function Stat({ label, value, suffix, hint, className }: StatProps) {
  return (
    <div
      className={cn(
        "relative rounded-[14px] border border-[var(--hairline)] bg-[var(--surface)] p-5 text-[var(--ink)] before:absolute before:inset-x-5 before:top-0 before:h-[1.5px] before:bg-[var(--accent)] before:opacity-40",
        className,
      )}
    >
      <p className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
        {label}
      </p>
      <p className="mt-2 text-[30px] font-medium leading-none tracking-[-0.025em] [font-variant-numeric:tabular-nums]">
        {value}
        {suffix ? (
          <em className="ml-1 text-sm not-italic text-[var(--ink-muted)]">
            {suffix}
          </em>
        ) : null}
      </p>
      {hint ? (
        <p className="mt-2 text-xs text-[var(--ink-soft)]">{hint}</p>
      ) : null}
    </div>
  );
}
