import { Button } from '@/components/ui'
import { cn } from '@/lib/utils'
import type { BlockByType } from '@c2s/payload-contracts/types'

type CTABlockProps = Omit<BlockByType<'cta-block'>, 'blockType' | 'blockName'>

export function CTABlock({
  headline,
  description,
  buttons,
  backgroundColor = 'dark',
}: CTABlockProps) {
  const bgClasses: Record<string, string> = {
    dark: 'bg-espresso',
    light: 'bg-ivory',
    accent: 'bg-brass',
  }

  const firstButton = buttons?.[0]

  return (
    <section className={cn('relative py-16 md:py-24', bgClasses[backgroundColor || 'dark'])}>
      <div className="container relative z-10">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className={cn(backgroundColor === 'light' ? 'text-espresso' : 'text-soft-white', 'mb-4')}>
            {headline}
          </h2>

          {description && (
            <p className={cn(
              'text-lg md:text-xl mb-8',
              backgroundColor === 'light' ? 'text-espresso/80' : 'text-soft-white/80'
            )}>
              {description}
            </p>
          )}

          {firstButton && (
            <Button
              href={firstButton.link}
              variant="secondary"
              size="lg"
              className={cn(
                backgroundColor !== 'light' &&
                  'border-soft-white text-soft-white hover:bg-soft-white hover:text-espresso'
              )}
            >
              {firstButton.text}
            </Button>
          )}
        </div>
      </div>
    </section>
  )
}