import { RichText } from '@/components/RichText'
import BlurFade from '@/components/ui/blur-fade'
import { SimpleBriefBlock } from '@/payload-types'
import { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'

const BLUR_FADE_DELAY = 0.04

type Props = { className: string } & SimpleBriefBlock
export const SimpleBrief = (props: Props) => {
  return (
    <section id={props.blockName || ''}>
      <BlurFade delay={BLUR_FADE_DELAY * 3}>
        <h2 className="text-xl font-bold">{props.title}</h2>
      </BlurFade>
      <BlurFade delay={BLUR_FADE_DELAY * 4}>
        <RichText
          data={props.content as DefaultTypedEditorState}
          className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert"
        />
      </BlurFade>
    </section>
  )
}