import styles from "./Footer.module.css"
import {Link} from "react-router";
import {useState} from "react";
import Modal from "../ui/modal/modal.jsx";
import TextInput from "../ui/input/input.jsx";

export default function Footer(){
    const currentYear = new Date().getFullYear();
    const scrollToTop = () => {
        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
    };
    const [isContactModal, setIsContactModal] = useState(false);

    return <>
        <footer className={`${styles.footer} glassCard`}>
            <div className={styles.footerContent}>
                <div className={styles.copyright}>
                    © {currentYear} Beaup'hub. Tous droits réservés.
                </div>

                <nav className={styles.footerNav}>
                    <Link to="/rgpd.pdf" target="_blank" className={styles.link}>Fiche RGPD</Link>
                    <span className={styles.separator}></span>
                    <Link to="/legalNotices" className={styles.link}>Mentions légales</Link>
                    <span className={styles.separator}></span>
                    <Link
                        className={styles.link}
                        onClick={() => setIsContactModal(true)}
                    >
                        Contact
                    </Link>
                    <span className={styles.separator}></span>
                    <Link to="/"
                          className={styles.link}
                          onClick={scrollToTop}
                    >
                        Accueil
                    </Link>
                </nav>
            </div>
        </footer>

        {/* TODO : mettre l'adresse email et le numéro de tel dans un fichier de configuration */}
        <Modal title={"Fiche de contact"} open={isContactModal} onClose={() => setIsContactModal(false)}>
            <section className={styles.section}>
                <div className={styles.inputContainer}>
                    <h3>Adresse email</h3>
                    <p>example@gmail.com</p>
                </div>

                <div className={styles.inputContainer}>
                    <h3>Numéro de téléphone</h3>
                    <p>+33 6 09 78 27 19</p>
                </div>
            </section>
        </Modal>
    </>
}