codey.lol/src/components/RandomMsg.jsx

import { useState, useEffect } from "react";
import { API_URL } from "../config";

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" },
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?>/gi, "\n"));
    } catch (err) {
      console.error("Failed to fetch random message:", err);
    }
  };

  useEffect(() => void getRandomMsg(), []);

  return (
    <div className="random-msg-container">
      <div className="random-msg">
        {randomMsg && (
          <small>
            <i>{randomMsg}</i>
          </small>
        )}
      </div>
      {randomMsg && (
        <button
          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}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="16"
            height="16"
            aria-hidden="true"
            focusable="false"
            className="inline-block"
          >
            <path
              d="M17.65 6.35a7.95 7.95 0 0 0-5.65-2.35 8 8 0 1 0 7.75 9.94h-2.08a6 6 0 1 1-5.67-7.94 5.94 5.94 0 0 1 4.22 1.78L13 11h7V4z"
              fill="currentColor"
            />
          </svg>

        </button>
      )}

    </div>
  );
}