src/components/docs/MetricDefCard.tsx

import clsx from "clsx";
import type { ReactNode } from "react";
import Badge from "@/components/ui/Badge";

export interface MetricDefCardProps {
  /** short symbol, e.g. "CS-WER" */
  abbr: string;
  /** spelled-out name, e.g. "Code-switch word error rate" */
  name: string;
  /** mono formula line; omit on roadmap ghosts without a fixed definition */
  formula?: string;
  /** "lower is better" / "higher is better" */
  direction?: string;
  /** ghost treatment for roadmap metrics */
  roadmap?: boolean;
  children: ReactNode;
  className?: string;
}

/** Typeset metric definition card: serif symbol, mono formula, prose gloss. */
export default function MetricDefCard({
  abbr,
  name,
  formula,
  direction,
  roadmap = false,
  children,
  className,
}: MetricDefCardProps) {
  return (
    <div
      className={clsx(
        "flex flex-col gap-2.5 rounded-sm p-5 spotlight-card",
        roadmap
          ? "border border-dashed border-line bg-transparent"
          : "hairline depth-1 bg-surface",
        className,
      )}
    >
      <div className="flex items-baseline justify-between gap-3">
        <h3
          className={clsx(
            "font-display text-2xl leading-none",
            roadmap ? "text-muted" : "text-text",
          )}
        >
          {abbr}
        </h3>
        {roadmap ? (
          <Badge variant="ghost">Roadmap</Badge>
        ) : (
          direction && (
            <span className="num whitespace-nowrap text-[11px] uppercase tracking-[0.14em] text-muted">
              {direction}
            </span>
          )
        )}
      </div>
      <p className="text-[11px] uppercase tracking-[0.14em] text-muted">
        {name}
      </p>
      {formula && (
        <code
          className={clsx(
            "num block whitespace-pre-wrap rounded-sm px-3 py-2 text-[12px]",
            roadmap
              ? "border border-dashed border-line text-muted"
              : "hairline bg-surface-2 text-text",
          )}
        >
          {formula}
        </code>
      )}
      <p className="text-[13px] leading-relaxed text-muted">{children}</p>
    </div>
  );
}