'use client'

import React from 'react'
import {
  RichText as PayloadRichText,
  JSXConvertersFunction,
} from '@payloadcms/richtext-lexical/react'
import { DefaultNodeTypes } from '@payloadcms/richtext-lexical'
import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
import { cn } from '@/lib/utils/cn'

type Props = {
  data: SerializedEditorState
  className?: string
}

const converters: JSXConvertersFunction<DefaultNodeTypes> = ({ defaultConverters }) => ({
  ...defaultConverters,
})

export const RichText = ({ data, className }: Props) => {
  return (
    <div className={cn('rich-text', className)}>
      <PayloadRichText converters={converters} data={data} />
    </div>
  )
}
