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

interface EndSessionModalProps {
  onEndSession: () => void;
}

function EndSessionModal({ onEndSession }: EndSessionModalProps) {
  const { setModal } = useModalStore();

  function handleEndSession() {
    onEndSession();
    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 2xl:gap-[0.556vw] gap-[2.222vw]">
          <Button
            variant="primary"
            size="medium"
            className="flex-1"
            onClick={() => setModal(null)}
          >
            Отмена
          </Button>
          <Button
            variant="critical"
            size="medium"
            className="flex-1"
            onClick={handleEndSession}
          >
            Завершить
          </Button>
        </div>
      </div>
    </ModalWrapper>
  );
}

export default EndSessionModal;
