import {
  RichText as LexicalRichText,
  type JSXConvertersFunction,
} from "@payloadcms/richtext-lexical/react";
import type { DefaultNodeTypes } from "@payloadcms/richtext-lexical";

const converters: JSXConvertersFunction<DefaultNodeTypes> = ({ defaultConverters }) => ({
  ...defaultConverters,
  paragraph: ({ node, nodesToJSX }) => {
    const children = nodesToJSX({ nodes: node.children });
    if (!children?.length) return null;
    return <p className="text-lg leading-relaxed text-anouma-plum">{children}</p>;
  },
  heading: ({ node, nodesToJSX }) => {
    const children = nodesToJSX({ nodes: node.children });
    const Tag = node.tag;
    return (
      <Tag className="mt-4 font-serif text-3xl font-medium text-anouma-plum">{children}</Tag>
    );
  },
});

type RichTextProps = {
  data: NonNullable<Parameters<typeof LexicalRichText>[0]["data"]>;
  className?: string;
};

/** Renders a Payload Lexical richText field with the ANOUMA reading styles. */
export function RichText({ data, className = "space-y-6" }: RichTextProps) {
  return <LexicalRichText data={data} converters={converters} className={className} />;
}