import React from 'react'
import type { FDHeroBlock as FDHeroBlockProps, Media } from '@/payload-types'

export const FDHeroBlockComponent: React.FC<FDHeroBlockProps> = ({
  heading,
  subheading,
  body,
  ctaText,
  ctaLink = '#',
  secondaryCtaText,
  secondaryCtaLink = '#',
  backgroundImage,
  overlayOpacity = '50',
  textColor = 'auto',
  theme = 'light',
}) => {
  const media = backgroundImage as Media | undefined
  const bgImageUrl = media?.url || ''
  const hasBgImage = Boolean(bgImageUrl)
  const isDark = hasBgImage || theme === 'dark'

  let headingColor: string
  let textBodyColor: string
  if (textColor === 'white') {
    headingColor = 'text-white'
    textBodyColor = 'text-white'
  } else if (textColor === 'navy') {
    headingColor = 'text-fd-navy'
    textBodyColor = 'text-fd-navy'
  } else {
    headingColor = isDark ? 'text-fd-yellow' : 'text-fd-navy'
    textBodyColor = isDark ? 'text-white' : 'text-fd-navy'
  }

  const overlayClass =
    overlayOpacity === '30' ? 'bg-black/30' : overlayOpacity === '70' ? 'bg-black/70' : 'bg-black/50'

  const secondaryBtnClass =
    isDark && textColor !== 'navy' ? 'fd-btn-secondary-dark' : 'fd-btn-secondary'

  return (
    <section
      className={`relative w-full py-16 md:py-20 lg:py-[99px] ${hasBgImage ? '' : isDark ? 'bg-fd-navy' : 'bg-white'} overflow-hidden`}
    >
      {hasBgImage && (
        <>
          <img
            src={bgImageUrl}
            alt=""
            className="absolute inset-0 w-full h-full object-cover"
            aria-hidden="true"
          />
          <div className={`absolute inset-0 ${overlayClass}`} aria-hidden="true" />
        </>
      )}
      <div className="relative max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-start gap-6 md:gap-8">
        <h1 className={`w-full max-w-[884px] font-joey-heavy text-fd-display ${headingColor}`}>
          {heading}
        </h1>
        {subheading && (
          <h2 className={`w-full max-w-[884px] font-joey-medium text-fd-h1 ${textBodyColor}`}>
            {subheading}
          </h2>
        )}
        {body && (
          <p className={`w-full max-w-[597px] font-joey text-fd-body-lg ${textBodyColor}`}>
            {body}
          </p>
        )}
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
          {ctaText && (
            <a href={ctaLink || '#'} className="fd-btn-primary">
              {ctaText}
            </a>
          )}
          {secondaryCtaText && (
            <a href={secondaryCtaLink || '#'} className={secondaryBtnClass}>
              {secondaryCtaText}
            </a>
          )}
        </div>
      </div>
    </section>
  )
}