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

const MiddleTitle: React.FC<MiddleTitleProps> = ({
  headerValue,
  mainTitle,
  summary,
}) => {
  return (
    <div
      data-testid="ContentsEditorMiddleTitle"
      className="nrc--ContentsEditorMiddleTitle w-full max-w-[80rem] border-b-[1px] border-gray-3 px-[2rem] pt-[3rem] pb-[2rem] pc:pt-[4rem] pc:pb-[3rem]"
    >
      <div className="flex space-x-[0.8rem]">
        <div className="flex h-[2.7rem] w-[2.7rem] flex-shrink-0 items-center justify-center bg-gray-10">
          <Heading level={5} className="text-white">
            {headerValue}
          </Heading>
        </div>
        <Heading level={4} className="text-gray-10 pc:text-heading-3">
          {mainTitle}
        </Heading>
      </div>
      <Text
        type="B2"
        className="mt-[1.2rem] whitespace-pre-wrap text-gray-10 pc:mt-[2rem]"
      >
        {summary}
      </Text>
    </div>
  );
};

export default MiddleTitle;