import { useState, useEffect } from "react";
import { API_URL } from "../config";
import ReplayIcon from "@mui/icons-material/Replay";

export default function RandomMsg() {
  const [randomMsg, setRandomMsg] = useState("");

  const getRandomMsg = async () => {
    try {
      const response = await fetch(`${API_URL}/randmsg`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
      });

      const data = await response.json();
      if (data?.msg) {
        const formattedMsg = data.msg.replace(/<br\s*\/?>/gi, "\n");
        setRandomMsg(formattedMsg);
      }
    } catch (err) {
      console.error("Failed to fetch random message:", err);
    }
  };

  useEffect(() => {
    getRandomMsg();
  }, []);

  return (
    <div className="random-msg-container">
      <div className="random-msg">
        {randomMsg && (
          <small>
            <i>{randomMsg}</i>
          </small>
        )}
      </div>
      <button
        id="new-msg"
        aria-label="New footer message"
        type="button"
        className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
        onClick={getRandomMsg}
      >
        <ReplayIcon fontSize="small" />
      </button>
    </div>
  );
}