import type { ReactElement } from "react";
import { EKKLESIA_UI_STYLE_ATTRIBUTE, EKKLESIA_UI_STYLESHEET } from "./styles.js";

/**
 * Renders the element stylesheet into whichever root this React tree happens to live in.
 *
 * That is the whole point: a Dashboard renders it into the document, and a module UI artifact
 * renders it inside its own isolated root, with no caller having to know which one it is. React puts
 * a `<style>` where the tree is, so the same component gives a document and a shadow root the
 * identical rules without either reaching into the other.
 *
 * Render it once per root, above the elements that use it. A second copy in one root is harmless
 * (the rules are identical) but pointless. There is deliberately no global side effect, no
 * `document.head` hoisting, and no `precedence` attribute: hoisting a shadow root's styles into the
 * host document is exactly the leak this package exists to prevent.
 */
export function EkklesiaUiStyles(): ReactElement {
  const marker = { [EKKLESIA_UI_STYLE_ATTRIBUTE]: "" };
  return <style {...marker}>{EKKLESIA_UI_STYLESHEET}</style>;
}