// LinktreePage.js
import React, { useState, useEffect } from 'react';
import styles from './Join.module.css'; // Import the module.css file

const LinktreePage = ({ handleYes, handleNo }) => {
  const [captMessage, setCaptMessage] = useState('');
  const [descMessage, setDescMessage] = useState('');
  const [yesText, setYesText] = useState('');
  const [noText, setNoText] = useState('');

  useEffect(() => {
      const newQueryParams = new URLSearchParams(window.location.search);
      const r = newQueryParams.get('captMessage');
      const s = newQueryParams.get('descMessage');
      const v = newQueryParams.get('yesText');
      const vn = newQueryParams.get('noText');
      if (r) {
        setCaptMessage(r)
        setDescMessage(s)
        setYesText(v)
        setNoText(vn)
      }
  }, []);

  return (
    <div className={styles.linktreePage}>
        <div className={styles.dashboardContainer} >
          <div className={styles.mainHeading}>{captMessage}</div>
          {descMessage && <div className={styles.descHeading}>{descMessage}</div>}
          {handleYes && <div onClick={handleYes} className={styles.button}>{yesText}</div>}
          {noText && <div onClick={handleNo} className={styles.button}>{noText}</div>}
        </div>
    </div>
  );
};

export default LinktreePage;
