import type { ReactNode } from 'react';
import { useT, type Dict } from '@/lib/i18n';

// Plain-language explainers live in the dictionary (t.glossary.*); this maps
// the legacy <Term k="…"/> keys onto the dictionary entries.
const GLOSSARY_KEY: Record<string, keyof Dict['glossary'] | undefined> = {
  RPS: 'rps',
  Brier: 'brier',
  ECE: 'ece',
  Elo: 'elo',
  xG: 'xg',
  'de-vig': 'deVig',
  ensemble: 'ensemble',
};

/** A dotted-underline term with a plain-language tooltip from the glossary. */
export function Term({ k, children }: { k: string; children?: ReactNode }) {
  const t = useT();
  const dictKey = GLOSSARY_KEY[k];
  const entry = dictKey ? t.glossary[dictKey] : undefined;
  return (
    <span
      tabIndex={0}
      title={entry?.definition ?? k}
      className="cursor-help underline decoration-line decoration-dotted underline-offset-2"
    >
      {children ?? entry?.term ?? k}
    </span>
  );
}
