import { FC } from "react";

import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import a11yStyles from "~/styles/accessibility.module.css";

import SubsectionTablet from "../../../components/SubsectionTablet";
import TabletBox from "../../../components/TabletBox";
import Description from "../../Description";

export const DescriptionTablet: FC = () => {
  const { characterTheme } = useCharacterEngine();

  return (
    <SubsectionTablet>
      <TabletBox
        header={"Background"}
        className="ct-description-tablet"
        theme={characterTheme}
      >
        <section>
          <h2 className={a11yStyles.screenreaderOnly}>Background</h2>
          <Description theme={characterTheme} />
        </section>
      </TabletBox>
    </SubsectionTablet>
  );
};
