import type { Block } from 'payload'
import { lexicalEditor } from '@payloadcms/richtext-lexical'

export const CalloutBlock: Block = {
  slug: 'callout',
  interfaceName: 'CalloutBlock',
  fields: [
    { name: 'title', type: 'text' },
    {
      name: 'variant',
      type: 'select',
      options: ['default', 'note', 'warning', 'tip'],
      defaultValue: 'default',
    },
    { name: 'content', type: 'richText', editor: lexicalEditor() },
  ],
  jsx: {
    export: ({ fields, lexicalToMarkdown }) => ({
      props: {
        ...(fields.title ? { title: fields.title } : {}),
        ...(fields.variant && fields.variant !== 'default' ? { variant: fields.variant } : {}),
      },
      children: fields.content ? lexicalToMarkdown({ editorState: fields.content }) : '',
    }),
    import: ({ children, markdownToLexical, props }) => ({
      title: props?.title ?? '',
      variant: props?.variant ?? 'default',
      content: markdownToLexical({ markdown: children ?? '' }),
    }),
  },
}