import * as React from "react";

interface StatBlockProps {
  value: string;
  label: string;
  description?: string;
}

export function StatBlock({ value, label, description }: StatBlockProps) {
  return (
    <div className="border border-hairline bg-white p-6 rounded-sm text-center">
      <div className="font-mono text-xs text-muted-foreground mb-1">METRIC</div>
      <div className="font-display text-4xl text-navy font-bold tracking-tight">{value}</div>
      <div className="font-sans text-sm text-ink font-semibold mt-2">{label}</div>
      {description && (
        <div className="font-sans text-xs text-muted-foreground mt-1">{description}</div>
      )}
    </div>
  );
}