"use client";

import { memo } from "react";
import type { RebuildProcessViewProps } from "./RebuildProcess.types";

function RebuildProcessView({ heading, body }: RebuildProcessViewProps) {
  return (
    <section
      data-figma-node="24237:1085"
      className="flex flex-col gap-6 border-b border-white/15 bg-black px-[var(--space-400)] py-16 lg:flex-row lg:items-start lg:justify-center lg:gap-12 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
      aria-labelledby="about-rebuild-heading"
    >
      <h2
        id="about-rebuild-heading"
        className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:w-[287px] lg:shrink-0"
      >
        {heading}
      </h2>
      <p className="max-w-[800px] font-inter text-paragraph-l text-[var(--color-content-default-tertiary)] lg:flex-1 lg:text-paragraph-xl">
        {body}
      </p>
    </section>
  );
}

RebuildProcessView.displayName = "RebuildProcessView";

export default memo(RebuildProcessView);