import type { IntroTextBlock } from "@/types";

interface Props {
  data: IntroTextBlock;
}

export default function RichText({ data }: Props) {
  if (!data.heading || !data.paragraphs) return null;

  return (
    <section className="mt-[40px] mb-[40px] lg:mt-[70px]">
      <div className="mx-auto w-full max-w-[1480px] px-[15px] flex items-center justify-center text-center">
        <div className="">
          <h3 className="text-[28px] leading-[34px] lg:leading-[41px] font-bold text-center text-[#85714D] mt-0 mb-[10px]"> 
            {data.heading}
          </h3>
          {data.paragraphs.map((text, index) => (
            <p
              key={index}
              className="text-[16px] lg:text-[20px] leading-[1.5] text-black text-center last:mb-0 mb-[44px] mt-[30px] font-[400]"
              dangerouslySetInnerHTML={{ __html: text }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}