import Image from 'next/image'
import { Button } from '@/components/ui'
import { cn } from '@/lib/utils'
import { getMediaUrl, getMediaAlt } from '@/lib/payload-helpers'
import type { BlockByType } from '@c2s/payload-contracts/types'

type HeroBlockProps = Omit<BlockByType<'hero-block'>, 'blockType' | 'blockName'>

export function HeroBlock({
  headline,
  subline,
  backgroundImage,
  cta,
  alignment = 'center',
  overlay = true,
}: HeroBlockProps) {
  const bgUrl = getMediaUrl(backgroundImage)

  const alignmentClasses = {
    left: 'text-left items-start',
    center: 'text-center items-center',
    right: 'text-right items-end',
  }

  return (
    <section className="relative min-h-[60vh] md:min-h-[70vh] flex items-center">
      {/* Background Image */}
      {bgUrl && (
        <div className="absolute inset-0">
          <Image
            src={bgUrl}
            alt={getMediaAlt(backgroundImage)}
            fill
            className="object-cover"
            priority
          />
          {overlay && (
            <div className="absolute inset-0 bg-espresso/50" />
          )}
        </div>
      )}

      {/* Content */}
      <div className="container relative z-10">
        <div
          className={cn(
            'flex flex-col max-w-3xl py-20',
            alignmentClasses[alignment || 'center'],
            (alignment || 'center') === 'center' && 'mx-auto'
          )}
        >
          <h1
            className={cn(
              'mb-6',
              bgUrl ? 'text-soft-white' : 'text-espresso'
            )}
          >
            {headline}
          </h1>

          {subline && (
            <p
              className={cn(
                'text-lg md:text-xl leading-relaxed mb-8',
                bgUrl ? 'text-soft-white/90' : 'text-espresso'
              )}
            >
              {subline}
            </p>
          )}

          {cta?.text && cta?.link && (
            <Button href={cta.link} size="lg">
              {cta.text}
            </Button>
          )}
        </div>
      </div>
    </section>
  )
}