import type { StoreSiteBlock } from "@alqove/api-client";
import { SectionHeading, StorefrontSection } from "../section";
import { blockData, paragraphs, str } from "../block-data";

export function RichTextBlock({ block }: { block: StoreSiteBlock }) {
  const data = blockData(block);
  const heading = str(data, "heading");
  const centered = str(data, "align") === "center";
  // Rendered as plain-text paragraphs, never as HTML — the body is
  // seller-authored and untrusted.
  const body = paragraphs(str(data, "body"));

  if (!heading && body.length === 0) return null;

  return (
    <StorefrontSection>
      <div className={centered ? "mx-auto max-w-2xl text-center" : "max-w-2xl"}>
        {heading && <SectionHeading centered={centered}>{heading}</SectionHeading>}
        <div className="space-y-4 text-base leading-relaxed" style={{ color: "var(--sf-muted)" }}>
          {body.map((paragraph, i) => (
            <p key={i} className="whitespace-pre-line">
              {paragraph}
            </p>
          ))}
        </div>
      </div>
    </StorefrontSection>
  );
}