import '../form/form.css'
import { TProps } from "../calendarDesktop/calendarDesktop";
import { useSwiper } from 'swiper/react';




export const Confirm: React.FC<TProps> = ({ open, onExit, setOpen, isMobile, text }) => {
    const swiper = useSwiper();

    function exit() {
        if (isMobile) {
            swiper.slideNext()
            onExit()
        } else {
            onExit()
        }
    }

    return (<div className={open.confirm ? "confirm" : "confirm__none"}>
        <div className="confirm__container">
            <h2 className="confirm__title">
                {text.confirm.title}
            </h2>
            <p className="confirm__caption">
                {text.confirm.caption}
            </p>
        </div>
        <button onClick={exit} className="button__submit">
            {text.buttons.next}
        </button>
    </div>
    )

}
