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

type SpecCardProps = {
  /** Mono label, e.g. "FIELD OF VIEW". */
  label: string;
  /** The measurement, e.g. "116°" or "5120 × 2560". */
  value: React.ReactNode;
  className?: string;
  /** "card" = graphite tile (default); "bare" = no surface, for dense spec lists. */
  variant?: "card" | "bare";
};

/**
 * A caliper readout: a Fragment Mono label over a large Neue Haas value, on a
 * graphite tonal step (no shadow — see DESIGN.md "Flat Stage Rule"). The brand's
 * way of "earning the price" with a number instead of an adjective.
 */
export function SpecCard({ label, value, className, variant = "card" }: SpecCardProps) {
  return (
    <div
      className={cn(
        "flex flex-col gap-2",
        variant === "card" && "rounded bg-card p-6",
        className,
      )}
    >
      <span className="font-mono text-caption uppercase tracking-[0.04em] text-muted">
        {label}
      </span>
      <span className="font-display text-3xl font-medium leading-tight tracking-tight">
        {value}
      </span>
    </div>
  );
}