import { FIELD_HELP } from '../help/settingHelp';
import '../components/HelpTip.css';

interface HelpTipProps {
  field: string;
  label?: string;
}

export function HelpTip({ field, label }: HelpTipProps) {
  const text = FIELD_HELP[field];
  if (!text) return null;
  return (
    <span className="help-tip" title={text} aria-label={text}>
      <span className="help-tip-icon">?</span>
      {label && <span className="help-tip-label">{label}</span>}
    </span>
  );
}

export function FieldHint({ field }: { field: string }) {
  const text = FIELD_HELP[field];
  if (!text) return null;
  return <span className="form-hint">{text}</span>;
}
