'use client';

import React from 'react';
import { Button } from '@/components/ui/Button';
import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';

export interface CallToActionProps {
  title?: string;
  description?: string;
  text?: string; // Alias for description
  ctaLabel?: string;
  buttonText?: string; // Alias for ctaLabel
  ctaHref?: string;
  buttonLink?: string; // Alias for ctaHref
  theme?: 'light' | 'dark';
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
  },
};

export const CallToAction: React.FC<CallToActionProps> = (props) => {
  const { theme = 'light' } = props;
  const isDark = theme === 'dark';
  const t = useTranslations('CallToAction');
  
  const title = props.title || t('title');
  const description = props.description || props.text || t('description');
  const ctaLabel = props.ctaLabel || props.buttonText || t('ctaLabel');
  const ctaHref = props.ctaHref || props.buttonLink || t('ctaHref');
  
  return (
    <div className={`py-24 text-center ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-50 border-t border-neutral-100'}`}>
      <motion.div 
        className="container max-w-3xl mx-auto px-4"
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-100px" }}
      >
        <motion.h2 variants={itemVariants} className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
          {title}
        </motion.h2>
        <motion.p variants={itemVariants} className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
          {description}
        </motion.p>
        <motion.div variants={itemVariants}>
          <Button 
            href={ctaHref} 
            size="xl"
            variant={isDark ? 'white' : 'primary'}
          >
            {ctaLabel}
          </Button>
        </motion.div>
      </motion.div>
    </div>
  );
};