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

export default function YesNoPopup({ question, onAnswer }: YesNoPopupProps) {
  const handleAnswer = (answer: boolean) => {
    onAnswer(answer);
  };

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