← back to Stayclaim

src/components/Projection.tsx

40 lines

import { ConfidenceDot } from './ConfidenceDot';

/**
 * Projection — numeric + confidence + anchor window.
 * Wraps ConfidenceDot. Never displays a projection without the anchor.
 *
 * Anchor example: "LA 1978–1984 price trajectory (CAR + FRED)"
 */
export function Projection({
  label,
  value,
  unit,
  confidence,
  anchorWindow,
  note,
}: {
  label: string;
  value: string | number;
  unit?: string;
  confidence: number;
  anchorWindow: string;
  note?: string;
}) {
  return (
    <div className="py-4 border-b border-ink/5">
      <div className="text-xs uppercase tracking-wider text-ink/50 mb-1">{label}</div>
      <div className="flex items-baseline gap-2">
        <span className="font-display text-3xl text-ink">
          {typeof value === 'number' ? value.toLocaleString() : value}
        </span>
        {unit && <span className="text-sm text-ink/60">{unit}</span>}
      </div>
      <div className="mt-2">
        <ConfidenceDot confidence={confidence} anchorWindow={anchorWindow} />
      </div>
      {note && <p className="mt-2 text-xs text-ink/50 leading-relaxed">{note}</p>}
    </div>
  );
}