import ModalWrapper from "../ModalWrapper";
import Button from "../ui/Button";
import useModalStore from "../../store/modalStore";

interface QuitSessionModalProps {
  onQuitSession: () => void;
}

function QuitSessionModal({ onQuitSession }: QuitSessionModalProps) {
  const { setModal } = useModalStore();

  function handleQuitSession() {
    onQuitSession();
    setModal(null);
  }

  return (
    <ModalWrapper className="2xl:w-[21.667vw]">
      <div className="flex flex-col items-center text-center">
        <h2 className="title-m 2xl:mb-[0.556vw] 2xl:px-[2.5vw] mb-[2.222vw] px-[10vw]">
          Хотите выйти?
        </h2>
        <p className="text-s text-[#CCCCCC] 2xl:mb-[1.667vw] mb-[3.889vw]">
          Результаты встречи будут сохранены
        </p>
        <div className="flex w-full gap-[0.556vw]">
          <Button
            variant="primary"
            size="medium"
            className="flex-1"
            onClick={() => setModal(null)}
          >
            Остаться
          </Button>
          <Button
            variant="critical"
            size="medium"
            className="flex-1"
            onClick={handleQuitSession}
          >
            Выйти
          </Button>
        </div>
      </div>
    </ModalWrapper>
  );
}

export default QuitSessionModal;
