school_compare/nextjs-app/components/MetricTooltip.tsx

'use client';

import { METRIC_EXPLANATIONS } from '@/lib/metrics';
import { InfoPopover } from './InfoPopover';

interface MetricTooltipProps {
  metricKey?: string;
  label?: string;
  plain?: string;
  detail?: string;
}

export function MetricTooltip({ metricKey, label, plain, detail }: MetricTooltipProps) {
  const explanation = metricKey ? METRIC_EXPLANATIONS[metricKey] : undefined;
  const resolvedLabel = label ?? explanation?.label;
  return (
    <InfoPopover
      label={resolvedLabel}
      plain={plain ?? explanation?.plain}
      detail={detail ?? explanation?.detail}
      ariaLabel={resolvedLabel ? `What does ${resolvedLabel} mean?` : undefined}
    />
  );
}