// Generated with util/create-component.js
import React from "react";
import Heading from "../../UI/Heading";
import TextElement from "../Text";
import { BigTitleProps } from "./BigTitle.types";

const BigTitle: React.FC<BigTitleProps> = ({
  chapterText,
  mainTitle,
  subTitle,
  editorContent,
}) => {
  return (
    <div
      data-testid="ContentsEditorBigTitle"
      className="nrc--ContentsEditorBigTitle w-full max-w-[80rem] border-y-[1px] border-gray-3 bg-gray-1 px-[2rem] pt-[3rem] pb-[4rem] pc:pt-[4rem] pc:pb-[6rem]"
    >
      <div className="flex items-center gap-x-[0.8rem]">
        <Heading
          level={5}
          className="inline-block bg-gray-10 px-[1rem] py-[0.2rem] text-white pc:text-heading-4"
        >
          {chapterText}
        </Heading>
        <Heading level={3} className="text-gray-10 pc:text-heading-2">
          {mainTitle}
        </Heading>
      </div>
      <Heading level={5} className="mt-[1.2rem] text-gray-10 pc:mt-[2rem]">
        {subTitle}
      </Heading>
      {editorContent && (
        <>
          <hr className="my-[1.2rem] border-dashed border-gray-3 pc:mt-[2rem]" />
          <TextElement editorContent={editorContent} className="pt-[2rem]" />
        </>
      )}
    </div>
  );
};

export default BigTitle;