5chan/src/components/disclaimer-modal/disclaimer-modal.tsx

import { useNavigate } from 'react-router-dom';
import useDisclaimerModalStore from '../../stores/use-disclaimer-modal-store';
import styles from './disclaimer-modal.module.css';

const DisclaimerModal = () => {
  const navigate = useNavigate();
  const { showModal, targetAddress, closeDisclaimerModal, acceptDisclaimer } = useDisclaimerModalStore();

  if (!showModal) {
    return null;
  }

  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) {
      closeDisclaimerModal();
    }
  };

  const handleAccept = () => {
    acceptDisclaimer(navigate);
  };

  return (
    <div className={styles.backdrop} onClick={handleBackdropClick}>
      <div className={styles.disclaimerDialog}>
        <div className={styles.hd}>
          <h2>Disclaimer</h2>
          <button className={styles.closeButton} onClick={closeDisclaimerModal} title='Close' />
        </div>
        <div className={styles.bd}>
          <p>To access boards on 5chan (the &quot;website&quot;), you understand and agree to the following:</p>
          <ol>
            <li>
              The content on boards may be for mature audiences only and may not be suitable for minors. Boards are created and moderated by individual owners who run
              their own nodes. If you are a minor or it is illegal for you to access mature content, do not proceed.
            </li>
            <li>
              This website is presented to you AS IS, with no warranty, express or implied. By clicking &quot;I Agree,&quot; you agree that 5chan is a decentralized,
              serverless, and adminless platform. The website operator does not create, own, moderate, or control any board content, which is stored peer-to-peer and
              generated by board owners and users.
            </li>
            <li>
              Each board has its own rules set by its owner. You agree to comply with the individual board&apos;s rules, which you can find on each board&apos;s page.
              There are no global rules as 5chan has no central authority.
            </li>
          </ol>
        </div>
        <div className={styles.disclaimerFooter}>
          <button onClick={handleAccept}>Accept</button>
          <button onClick={closeDisclaimerModal}>Cancel</button>
        </div>
      </div>
    </div>
  );
};

export default DisclaimerModal;