"use client";

import { memo } from "react";
import Button from "../../buttons/Button";
import type { NarrativeBlockViewProps } from "./NarrativeBlock.types";

function NarrativeBlockView({
  heading,
  paragraphs,
  addHeading,
  addLine,
  shareExperiences,
  helpBuild,
  helpBuildHref,
  onShareExperiences,
}: NarrativeBlockViewProps) {
  return (
    <section
      data-figma-node="24237:1241"
      className="flex flex-col items-center gap-10 border-b border-[var(--color-border-default-secondary)] bg-black px-[var(--space-400)] py-16 lg:gap-14 lg:px-[var(--space-2400)] lg:py-[var(--space-3000)]"
      aria-labelledby="about-narrative-heading"
    >
      <div className="flex w-full max-w-[800px] flex-col gap-8 lg:gap-10">
        <h2
          id="about-narrative-heading"
          className="font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)] lg:text-heading-xxl"
        >
          {heading}
        </h2>
        <div className="flex flex-col gap-8">
          {paragraphs.map((paragraph) => (
            <p
              key={paragraph}
              className="font-inter text-paragraph-l text-[var(--color-content-default-secondary)] lg:text-paragraph-xl"
            >
              {paragraph}
            </p>
          ))}
        </div>
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-2">
            <h3 className="font-bricolage-grotesque text-display-xs text-[var(--color-content-default-primary)]">
              {addHeading}
            </h3>
            <p className="font-inter text-paragraph-s text-[var(--color-content-default-secondary)]">
              {addLine}
            </p>
          </div>
          <div className="flex flex-wrap gap-4">
            <Button
              buttonType="filled"
              palette="default"
              size="medium"
              onClick={onShareExperiences}
            >
              {shareExperiences}
            </Button>
            <Button
              buttonType="filled"
              palette="default"
              size="medium"
              href={helpBuildHref}
              target="_blank"
              rel="noopener noreferrer"
            >
              {helpBuild}
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

NarrativeBlockView.displayName = "NarrativeBlockView";

export default memo(NarrativeBlockView);