import { useState } from 'react';

type Props = {
  text: string;
};

/** آیکون ? کنار عنوان‌ها — hover یا کلیک توضیح شناور نشان می‌دهد. */
export function HelpTip({ text }: Props) {
  const [open, setOpen] = useState(false);

  return (
    <span
      className="help-tip"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <button
        type="button"
        aria-label={`راهنما: ${text}`}
        onClick={() => setOpen((prev) => !prev)}
        onBlur={() => setOpen(false)}
      >
        <i className="bi bi-question-lg" aria-hidden="true" />
      </button>
      {open && <span className="help-tip-pop" role="tooltip">{text}</span>}
    </span>
  );
}