// Generated with util/create-component.js
import React, { memo } from "react";
import { IntroTitleProps } from "./IntroTitle.types";

const IntroTitle = ({ mainTitle, subTitle }: IntroTitleProps) => {
  return (
    <div
      data-testid="ContentsEditorIntroTitle"
      className="nrc--ContentsEditorIntroTitle w-full max-w-[80rem] px-[2rem] pt-[3rem] pc:pt-[4rem]"
    >
      <h3 className="inline-block whitespace-pre-wrap bg-gray-10 px-[1rem] py-[0.5rem] text-heading-4 font-extrabold text-white pc:text-heading-3">
        {mainTitle}
      </h3>

      <h5 className="mt-[1.2rem] whitespace-pre-wrap text-heading-6 font-extrabold text-gray-10 pc:text-heading-5">
        {subTitle}
      </h5>

      <hr className="mt-[2rem] border-dashed border-gray-3" />
    </div>
  );
};

export default memo(IntroTitle);