import * as React from 'react';
import { useOutsideClose } from '../../shared/hooks/useOutsideClose';
import { HUB_TEXTS } from './texts';
import styles from './HubPage.module.scss';

const TEXTS = HUB_TEXTS.export;

/** Кнопка «?» с подсказкой о типах отчётов. Закрывается повторным кликом, кликом мимо или Esc. */
export const ExportInfoButton: React.FC = () => {
  const [isOpen, setIsOpen] = React.useState<boolean>(false);
  const wrapperRef = React.useRef<HTMLSpanElement>(null);

  useOutsideClose(wrapperRef, isOpen, () => setIsOpen(false));

  return (
    <span className={styles.infoWrapper} ref={wrapperRef}>
      <button
        type="button"
        className={styles.infoButton}
        aria-label={TEXTS.infoAriaLabel}
        aria-expanded={isOpen}
        onClick={() => setIsOpen((prev) => !prev)}
      >
        ?
      </button>
      {isOpen && (
        <span className={styles.infoPopover} role="tooltip">
          {TEXTS.infoRows.map((row) => (
            <span key={row.label} className={styles.infoRow}>
              <strong>{row.label}</strong> {row.text}
            </span>
          ))}
        </span>
      )}
    </span>
  );
};