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




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

    const {t} = useTranslation()

    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">
                {t("confirm-title")}
            </h2>
            <p className="confirm__caption">
                {t("confirm-caption")}
            </p>
        </div>
        <button onClick={exit} className="button__submit">
            {t("buttons-next")}
        </button>
    </div>
    )

}
