import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { atoms } from "../../../css/atoms/atoms.mjs";
import { root } from "../../HiddenVisually/HiddenVisually.css.mjs";
let announcementCounter = 0;
const containerPrefix = "braid-announcement-container";
const Announcement = ({ children }) => {
  const [announcementElement, setElement] = useState(null);
  const className = [
    atoms({
      reset: "div",
      position: "absolute",
      overflow: "hidden"
    }),
    root
  ].join(" ");
  useEffect(() => {
    const announcementContainerId = `${containerPrefix}-${announcementCounter++}`;
    const element = document.createElement("div");
    element.setAttribute("id", announcementContainerId);
    element.setAttribute("class", className);
    element.setAttribute("aria-live", "polite");
    element.setAttribute("aria-atomic", "true");
    document.body.appendChild(element);
    setElement(element);
    return () => {
      document.body.removeChild(element);
    };
  }, [className]);
  if (!announcementElement) {
    return null;
  }
  return createPortal(children, announcementElement);
};
export {
  Announcement
};
