Untitled

import { useState } from "react";
function Message() {
  const AffirmationList = [
    "T'es nul à chier mec",
    "Bon à rien",
    "Tu es vraiment con comme mec, tu sais",
    "Bouffon va",
  ];
  const MantraList = [
    "Tu es triste ? Bah, ce n'est pas mon problème en fait 😂",
    "Tu te sens seul ? Haha, cheh looser va",
    "Tu n'as pas de meuf ? Bah, sors de ta chambre gros geek va",
  ];

  const [messageType, setMessageType] = useState("affirmation");
  const [display, setDisplay] = useState("☀️☀️☀️");

  function RandomMessage() {
    if (messageType === "affirmation" && AffirmationList.length > 0) {
      const randomAffirmation = Math.floor(
        Math.random() * AffirmationList.length
      );
      setDisplay(AffirmationList[randomAffirmation]);
    } else if (messageType === "mantra" && MantraList.length > 0) {
      const randomMantra = Math.floor(Math.random() * MantraList.length);
      setDisplay(MantraList[randomMantra]);
    }
  }

  function handleCall() {
    RandomMessage();
  }

  return (
    <>
      <div className="typeofmessage">Which type of message do you want?</div>
      <div className="inputtype">
        <div className="chooseinput">
          <div className="affirmationInput">
            <input
              type="radio"
              className="affirmation"
              id="affirmation"
              checked={messageType === "affirmation"}
              onChange={() => setMessageType("affirmation")}
              required
            />
            <label htmlFor="affirmation">Affirmation</label>
          </div>
          <div className="mantraInput">
            <input
              type="radio"
              className="mantra"
              id="mantra"
              checked={messageType === "mantra"}
              onChange={() => setMessageType("mantra")}
              required
            />
            <label htmlFor="mantra">Mantra</label>
          </div>
        </div>
        <button className="ReceivedMessage" onClick={handleCall}>
          Received Message
        </button>
      </div>
      <div className="display">
        <p>{display}</p>
      </div>
    </>
  );
}

export default Message;