import React from 'react'

import type { Page } from '@/payload-types'

import RichText from '@/components/RichText'

type LowImpactHeroType =
  | {
      children?: React.ReactNode
      richText?: never
      theme?: never
      heroBackground?: never
      heroBackgroundOpacity?: never
    }
  | (Omit<Page['hero'], 'richText'> & {
      children?: never
      richText?: Page['hero']['richText']
      theme?: string
      heroBackground?: any
      heroBackgroundOpacity?: number
    })

const bgMap: Record<string, string> = {
  default: 'bg-transparent',
  muted: 'bg-muted',
  card: 'bg-card',
  secondary: 'bg-secondary',
}

export const LowImpactHero: React.FC<LowImpactHeroType> = ({
  children,
  richText,
  theme,
  heroBackground,
  heroBackgroundOpacity,
}) => {
  const isImage = theme === 'image' && heroBackground
  const overlayOpacity = (heroBackgroundOpacity ?? 60) / 100
  const bg = bgMap[theme ?? 'default'] ?? 'bg-transparent'

  return (
    <div
      className={isImage ? 'relative' : bg}
      style={
        isImage && typeof heroBackground === 'object'
          ? {
              backgroundImage: `url(${heroBackground.url})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }
          : undefined
      }
    >
      {isImage && (
        <div className="absolute inset-0 bg-background" style={{ opacity: overlayOpacity }} />
      )}
      <div className="container mt-16 py-16 relative z-10">
        <div className="max-w-[48rem] [&_h3]:opacity-60">
          {children || (richText && <RichText data={richText} enableGutter={false} />)}
        </div>
      </div>
    </div>
  )
}
