import clsx from "clsx";
import { useLayoutEffect } from "react";

import { MaxCharactersMessageText } from "~/components/MaxCharactersMessageText";

import styles from "./max-characters-message.module.css";

export const MaxCharactersMessage = () => {
  //This mimics the same body classes as CharacterBuilderContainer.tsx
  useLayoutEffect(() => {
    document
      .getElementsByTagName("body")[0]
      .classList.add(
        "site",
        "body-rpgcharacterbuilder",
        "site-dndbeyond",
        "body-rpgcharacter"
      );
    return () => {
      document
        .getElementsByTagName("body")[0]
        .classList.remove(
          "site",
          "body-rpgcharacterbuilder",
          "site-dndbeyond",
          "body-rpgcharacter"
        );
    };
  }, []);
  return (
    <div className={clsx([styles.page])}>
      <MaxCharactersMessageText includeTitle={true} useLinks={true} />
    </div>
  );
};

export default MaxCharactersMessage;