'use client'

import { motion } from 'framer-motion'
import { Button } from '../ui/Button'

interface CTAButton {
  text?: string
  link?: string
  style?: 'primary' | 'secondary' | 'outline'
  id?: string
}

interface CTABlockProps {
  block: {
    headline?: string
    description?: string
    buttons?: CTAButton[]
    backgroundColor?: 'dark' | 'light' | 'accent'
  }
}

const bgStyles = {
  dark: 'bg-dark',
  light: 'bg-light',
  accent: 'bg-accent',
}

const buttonVariantMap = {
  primary: 'default' as const,
  secondary: 'ghost-light' as const,
  outline: 'ghost-light' as const,
}

export function CTABlock({ block }: CTABlockProps) {
  const { headline, description, buttons, backgroundColor = 'dark' } = block
  const isDark = backgroundColor === 'dark' || backgroundColor === 'accent'

  return (
    <section className={`relative py-20 ${bgStyles[backgroundColor] || bgStyles.dark}`}>
      <motion.div
        className="container mx-auto px-4 text-center"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
      >
        {headline && (
          <h2
            className={`font-heading font-bold text-[1.5em] tracking-[8px] uppercase mb-4 ${isDark ? 'text-white' : 'text-dark'}`}
          >
            {headline}
          </h2>
        )}

        {description && (
          <p className={`max-w-2xl mx-auto mb-8 ${isDark ? 'text-white/80' : 'text-gray'}`}>
            {description}
          </p>
        )}

        {buttons && buttons.length > 0 && (
          <div className="flex flex-wrap justify-center gap-4">
            {buttons.map((btn, index) => (
              <Button
                key={btn.id || index}
                href={btn.link || '#'}
                variant={buttonVariantMap[btn.style || 'primary'] || 'default'}
                size="large"
              >
                {btn.text || 'Mehr erfahren'}
              </Button>
            ))}
          </div>
        )}
      </motion.div>
    </section>
  )
}
