"use client";

import { X, Shield, AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
import styles from "./RememberMeInfoModal.module.css";

interface RememberMeInfoModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function RememberMeInfoModal({ isOpen, onClose }: RememberMeInfoModalProps) {
  if (!isOpen) return null;

  return (
    <div className={styles.modalOverlay} onClick={onClose}>
      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
        <div className={styles.modalHeader}>
          <div className={styles.modalTitle}>
            <Shield className={styles.titleIcon} />
            <h2>À propos de "Rester connecté"</h2>
          </div>
          <button onClick={onClose} className={styles.closeButton} aria-label="Fermer">
            <X size={20} />
          </button>
        </div>

        <div className={styles.modalBody}>
          <section className={styles.section}>
            <h3 className={styles.sectionTitle}>
              <CheckCircle2 className={styles.iconGreen} />
              Avantages
            </h3>
            <ul className={styles.list}>
              <li>
                <strong>Connexion automatique</strong> : Vous restez connecté pendant 30 jours, même après avoir fermé votre navigateur
              </li>
              <li>
                <strong>Gain de temps</strong> : Plus besoin de vous reconnecter à chaque visite
              </li>
              <li>
                <strong>Sécurisé</strong> : Vos identifiants restent protégés par des cookies cryptés
              </li>
            </ul>
          </section>

          <section className={styles.section}>
            <h3 className={styles.sectionTitle}>
              <XCircle className={styles.iconRed} />
              Risques sur ordinateur partagé
            </h3>
            <ul className={styles.list}>
              <li>
                <strong>Accès non autorisé</strong> : Toute personne utilisant le même navigateur pourrait accéder à votre compte
              </li>
              <li>
                <strong>Données sensibles</strong> : Vos bulletins de paie et informations personnelles seraient accessibles
              </li>
              <li>
                <strong>Session longue durée</strong> : La connexion persiste jusqu'à 30 jours ou déconnexion manuelle
              </li>
            </ul>
          </section>

          <section className={styles.section}>
            <h3 className={styles.sectionTitle}>
              <AlertTriangle className={styles.iconOrange} />
              Nos recommandations
            </h3>
            <div className={styles.recommendations}>
              <div className={styles.recommendation}>
                <CheckCircle2 className={styles.recommendationIcon} />
                <div>
                  <strong>Cochez si :</strong>
                  <p>Vous utilisez votre ordinateur personnel ou professionnel non partagé</p>
                </div>
              </div>
              <div className={styles.recommendation}>
                <XCircle className={styles.recommendationIcon} />
                <div>
                  <strong>Ne cochez pas si :</strong>
                  <p>Vous êtes sur un ordinateur public, partagé, ou dans un cybercafé</p>
                </div>
              </div>
            </div>
          </section>

          <div className={styles.securityNote}>
            <Shield size={16} />
            <p>
              <strong>Note de sécurité :</strong> Pensez toujours à vous déconnecter manuellement 
              après utilisation sur un ordinateur partagé, même sans avoir coché cette option.
            </p>
          </div>
        </div>

        <div className={styles.modalFooter}>
          <button onClick={onClose} className={styles.closeButtonFooter}>
            J'ai compris
          </button>
        </div>
      </div>
    </div>
  );
}
