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 [responseTime, setResponseTime] = useState(null);
  const [showResponseTime, setShowResponseTime] = useState(false);

  const getRandomMsg = async () => {
    try {
      const start = performance.now();
      const response = await fetch(`${API_URL}/randmsg`, {
        method: "POST",
        headers: { "Content-Type": "application/json; charset=utf-8" },
      });
      const end = performance.now();
      setResponseTime(Math.round(end - start));
      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);
      setResponseTime(null);
    }
  };

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

  return (
    <div className="random-msg-container">
      <div className="random-msg" style={{ position: "relative", display: "inline-block" }}>
        {randomMsg && (
          <>
            <small
              style={{ cursor: responseTime !== null ? "pointer" : "default" }}
              onClick={() => {
                if (responseTime !== null) setShowResponseTime((v) => !v);
              }}
              tabIndex={0}
              onBlur={() => setShowResponseTime(false)}
            >
              <i>{randomMsg}</i>
            </small>
            {showResponseTime && responseTime !== null && (
              <div
                style={{
                  position: "absolute",
                  left: "50%",
                  top: "100%",
                  transform: "translateX(-50%)",
                  marginTop: 4,
                  background: "#222",
                  color: "#fff",
                  fontSize: "0.75em",
                  padding: "2px 8px",
                  borderRadius: 6,
                  boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
                  zIndex: 10,
                  whiteSpace: "nowrap"
                }}
                role="status"
                aria-live="polite"
              >
                API response: {responseTime} ms
              </div>
            )}
          </>
        )}
      </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>
  );
}