import React from 'react'
import type { FDTextBlock as FDTextBlockProps } from '@/payload-types'
import RichText from '@/components/RichText'

const bgMap: Record<string, string> = {
  white:  'bg-white',
  navy:   'bg-fd-navy',
  gray:   'bg-fd-gray-light',
  yellow: 'bg-fd-yellow',
}

const alignMap: Record<string, string> = {
  left:   'text-left',
  center: 'text-center',
  right:  'text-right',
}

const maxWidthMap: Record<string, string> = {
  narrow: 'max-w-[600px]',
  medium: 'max-w-[800px]',
  wide:   'max-w-[1100px]',
  full:   '',
}

const textColorMap: Record<string, { h1: string; h2: string; body: string }> = {
  navy:   { h1: 'text-fd-navy',    h2: 'text-fd-navy',    body: 'text-fd-navy' },
  white:  { h1: 'text-white',      h2: 'text-white',      body: 'text-white/90' },
  yellow: { h1: 'text-fd-yellow',  h2: 'text-fd-yellow',  body: 'text-fd-yellow/90' },
}

export const FDTextBlockComponent: React.FC<FDTextBlockProps> = ({
  heading,
  subheading,
  body,
  alignment = 'left',
  textColor = 'navy',
  sectionBackground = 'white',
  maxWidth = 'wide',
}) => {
  const bg = bgMap[sectionBackground || 'white']
  const align = alignMap[alignment || 'left']
  const width = maxWidthMap[maxWidth || 'wide']
  const colors = textColorMap[textColor || 'navy']
  const containerAlign =
    alignment === 'center' ? 'mx-auto' : alignment === 'right' ? 'ml-auto' : ''

  if (!heading && !subheading && !body) return null

  return (
    <section className={`w-full py-12 md:py-16 lg:py-20 ${bg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8">
        <div className={`${width} ${containerAlign} ${align} flex flex-col gap-4 md:gap-6`}>
          {heading && (
            <h1 className={`font-joey-heavy text-fd-display ${colors.h1}`}>{heading}</h1>
          )}
          {subheading && (
            <h2 className={`font-joey-medium text-fd-h1 ${colors.h2}`}>{subheading}</h2>
          )}
          {body && (
            <div className={`font-joey text-fd-body-lg fd-prose ${colors.body}`}>
              <RichText data={body} />
            </div>
          )}
        </div>
      </div>
    </section>
  )
}