"use client";

import { fetchOnce } from "@/lib/fetch-once";

import { useEffect, useState } from "react";
import { Megaphone, X } from "lucide-react";

/** The announcement an admin sets in Settings, shown across the site. */
export function SiteBanner() {
  const [msg, setMsg] = useState<{ text: string; tone: string; link?: string; dismissible?: boolean } | null>(null);

  useEffect(() => {
    fetch("/api/announcements")
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => {
        // The most recent one that's currently within its dates.
        if (Array.isArray(d) && d.length) setMsg(d[0]);
      })
      .catch(() => {});
  }, []);

  if (!msg) return null;

  return (
    <div className={`site-banner ${msg.tone}`}>
      <Megaphone size={15} />
      <span>{msg.link ? (
        <a href={msg.link}>{msg.text}</a>
      ) : (
        msg.text
      )}
      {msg.dismissible !== false && (
        <button
          onClick={() => {
            // Remembered per message, so changing the text shows it again.
            localStorage.setItem("xr-banner-seen", msg.text);
            setMsg(null);
          }}
          aria-label="Dismiss"
        >
          <X size={15} />
        </button>
      )}</span>
    </div>
  );
}