'use client';

import { METRIC_EXPLANATIONS } from '@/lib/metrics';
import styles from './MetricTooltip.module.css';

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 tooltipLabel = label ?? explanation?.label;
  const tooltipPlain = plain ?? explanation?.plain;
  const tooltipDetail = detail ?? explanation?.detail;

  if (!tooltipPlain) return null;

  return (
    <span className={styles.wrapper}>
      <span className={styles.icon} aria-label={tooltipLabel ?? 'More information'} role="img">ⓘ</span>
      <span className={styles.tooltip} role="tooltip">
        {tooltipLabel && <span className={styles.tooltipLabel}>{tooltipLabel}</span>}
        <span className={styles.tooltipPlain}>{tooltipPlain}</span>
        {tooltipDetail && <span className={styles.tooltipDetail}>{tooltipDetail}</span>}
      </span>
    </span>
  );
}