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',
  gray: 'bg-fd-gray-light',
  navy: 'bg-fd-navy',
}

const textMap: Record<string, string> = {
  navy: 'text-fd-navy',
  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',
}

const roundedMap: Record<string, string> = {
  none: '',
  medium: 'rounded-[24px]',
  large: 'rounded-[40px]',
}

export const FDHeaderTextImageBlockComponent: React.FC<FDHeaderTextImageBlockProps> = ({
  heading,
  body,
  image,
  imageOverlay = 'none',
  imageRounded = 'large',
  textAlign = 'center',
  background = 'white',
  textColor = 'navy',
}) => {
  const bg = bgMap[background || 'white']
  const txt = textMap[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-12 md:py-16 lg:py-20 ${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 ${txt}`}>{heading}</h2>
            )}
            {body && (
              <p className={`font-joey text-fd-body ${txt} 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>
  )
}