import { useRef } from "preact/hooks";
import { useFocusTrap } from "../utils/useFocusTrap.ts";

interface YesNoPopupProps {
  question: string;
  onAnswer: (answer: boolean) => void;
}

export default function YesNoPopup({ question, onAnswer }: YesNoPopupProps) {
  const modalRef = useRef<HTMLDivElement>(null);

  // Enable focus trap for keyboard navigation
  useFocusTrap(true, modalRef);

  const handleAnswer = (answer: boolean) => {
    onAnswer(answer);
  };

  return (
    <div
      ref={modalRef}
      className="theme-popup-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="popup-question"
    >
      <div
        className="theme-popup-container"
        onClick={(e) => e.stopPropagation()}
      >
        <p id="popup-question">{question}</p>
        <div className="flex gap-16 mt-4 justify-center">
          <button
            type="button"
            onClick={() => handleAnswer(true)}
            className="theme-popup-button"
          >
            Yes
          </button>
          <button
            type="button"
            onClick={() => handleAnswer(false)}
            className="theme-popup-button"
          >
            No
          </button>
        </div>
      </div>
    </div>
  );
}