"use client";

/**
 * Figma: "Section / Narrative Block" (24237:1241)
 */

import { memo, useCallback, useState } from "react";
import { useMessages } from "../../../contexts/MessagesContext";
import AskOrganizerInquiryModal from "../../modals/AskOrganizerInquiry";
import NarrativeBlockView from "./NarrativeBlock.view";

const NarrativeBlockContainer = memo(() => {
  const copy = useMessages().pages.about.narrativeBlock;
  const [inquiryOpen, setInquiryOpen] = useState(false);
  const openInquiry = useCallback(() => setInquiryOpen(true), []);
  const closeInquiry = useCallback(() => setInquiryOpen(false), []);

  return (
    <>
      <NarrativeBlockView
        heading={copy.heading}
        paragraphs={copy.paragraphs}
        addHeading={copy.addHeading}
        addLine={copy.addLine}
        shareExperiences={copy.shareExperiences}
        helpBuild={copy.helpBuild}
        helpBuildHref={copy.helpBuildHref}
        onShareExperiences={openInquiry}
      />
      <AskOrganizerInquiryModal isOpen={inquiryOpen} onClose={closeInquiry} />
    </>
  );
});

NarrativeBlockContainer.displayName = "NarrativeBlock";

export default NarrativeBlockContainer;