import React from 'react'
import type { FDHeaderTextImageBlock as FDHeaderTextImageBlockProps, Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage'

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

// Heading: navy→yellow in dark, white stays white
const headingMap: Record<string, string> = {
  navy:  'text-fd-navy dark:text-fd-yellow',
  white: 'text-white',
}

// Body: navy→white in dark, white stays white
const bodyMap: Record<string, string> = {
  navy:  'text-fd-navy dark:text-white',
  white: 'text-white',
}

const overlayMap: Record<string, string> = {
  none:        '',
  navyLight:   'bg-fd-navy/20',
  navyMedium:  'bg-fd-navy/40',
  yellowLight: 'bg-fd-yellow/20',
  yellowMedium:'bg-fd-yellow/40',
  sepia:       'bg-[#8B7D3C]/30',
  blackLight:  'bg-black/20',
  blackMedium: 'bg-black/40',
}

/* Updated: responsive radius matching the standard system */
const roundedMap: Record<string, string> = {
  none:   '',
  medium: 'rounded-[20px] md:rounded-[32px] lg:rounded-[40px]',
  large:  'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]',
}

export const FDHeaderTextImageBlockComponent: React.FC<FDHeaderTextImageBlockProps> = ({
  heading,
  body,
  image,
  imageOverlay = 'none',
  imageRounded = 'large',
  textAlign = 'center',
  sectionBackground = 'white',
  textColor = 'navy',
}) => {
  const bg      = bgMap[sectionBackground || 'white']
  const headClr = headingMap[textColor || 'navy']
  const bodyClr = bodyMap[textColor || 'navy']
  const overlay = overlayMap[imageOverlay || 'none']
  const rounded = roundedMap[imageRounded || 'large']
  const align   = textAlign === 'center' ? 'text-center' : 'text-left'
  const media   = image as Media

  return (
    <section className={`w-full py-16 md:py-20 lg:py-[99px] ${bg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col gap-8 md:gap-10">
        {(heading || body) && (
          <div className={`flex flex-col gap-4 md:gap-6 ${align} ${textAlign === 'center' ? 'max-w-[900px] mx-auto' : ''}`}>
            {heading && (
              <h2 className={`font-joey-heavy text-fd-h1 ${headClr}`}>{heading}</h2>
            )}
            {body && (
              <p className={`font-joey text-fd-body-lg ${bodyClr} opacity-80`}>{body}</p>
            )}
          </div>
        )}
        {media?.url && (
          <div className={`relative w-full overflow-hidden ${rounded}`}>
            <FDImage
              media={media}
              size="hero"
              className="w-full h-auto object-cover"
              sizes="(max-width: 1200px) 100vw, 1200px"
              fallbackAlt={heading || ''}
            />
            {overlay && <div className={`absolute inset-0 ${overlay}`} />}
          </div>
        )}
      </div>
    </section>
  )
}