import React, { useEffect } from "react";
import Modal from "../../components/ui/Modal.jsx";
import cookiesModalCover from "../../assets/img/illustrations/cookies-modal-cover.svg";
import { Link } from "react-router-dom";
import { useUser } from "../../hooks/useUser.jsx";

export default function CookiesModal() {
	const { screensTranslations, hasConsentedCookies, setHasConsentedCookies, acceptCookies } = useUser();

	if (!screensTranslations || !screensTranslations.pagesName) return <p>loading</p>;
	const pagesName = screensTranslations.pagesName;

	return (
		<Modal
			unclosable
			className='classic-modal'
			id='modal-cookies'
			open={!hasConsentedCookies}
			onClose={setHasConsentedCookies}>
			<div className='modal-content-container modal-content-container--centered '>
				<div className='modal-content-container__content'>
					<img
						className='modal-content-container__modal-cover'
						src={cookiesModalCover}
						alt='close'
					/>
					<h3 className='titling-construction '>Données Anonymes</h3>
					<p className='explanation'>
						Notre plateforme traite vos informations de façon anonyme dans le but
						d'optimiser et de personnaliser votre expérience utilisateur sur notre
						site. Pour connaître en détail les données collectées et leur usage,
						consultez notre politique de gestion des données.
					</p>
					<div className='pages-redirection'>
						<Link to='/confidentiality' className='classic-link'>
							{pagesName.confidentiality}
						</Link>
						<Link to='/cookies' className='classic-link'>
							{pagesName.cookies}
						</Link>
					</div>
					<button
						className='cta cta--lhoist cta--schief cta--zuume cta--spaced-normal'
						onClick={acceptCookies}>
						Continuer
					</button>
				</div>
			</div>
		</Modal>
	);
}