import { Container } from '../ui/Container'
import { prose } from '@/lib/typography'
import { renderLexical } from '@/lib/lexical'
import { cn } from '@/lib/utils'

interface TextBlockProps {
  block: Record<string, unknown>
}

export function TextBlock({ block }: TextBlockProps) {
  const richText = block.content || block.richText
  // Content comes from trusted Payload CMS (authenticated admin-only).
  // The renderLexical function escapes all text content via escapeHtml().
  const htmlContent = renderLexical(richText)

  const alignment = (block.alignment as string) || 'left'
  const width = (block.width as 'narrow' | 'default' | 'wide') || 'default'
  const backgroundColor = (block.backgroundColor as string) || 'white'

  if (!htmlContent) return null

  return (
    <section
      className={cn(
        'py-ws-m',
        backgroundColor === 'light' && 'bg-light-bg'
      )}
      id="content"
    >
      <Container width={width}>
        <div
          className={cn(
            prose,
            alignment === 'center' && 'text-center'
          )}
          dangerouslySetInnerHTML={{ __html: htmlContent }}
        />
      </Container>
    </section>
  )
}
