'use client';

import Link from 'next/link';
import {motion} from 'framer-motion';
import {FiArrowRight} from 'react-icons/fi';
import {useThemeColors} from '@/utils/useThemeColors';

type ContactCTAProps = {
    title?: string;
    description?: string;
    buttonLabel?: string;
};

const ContactCTA = ({
                        title = "Interesse geweckt?",
                        description = "Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.",
                        buttonLabel = "Jetzt Kontakt aufnehmen",
                    }: ContactCTAProps) => {
    const colors = useThemeColors();

    return (
        <section
            className="relative w-full py-24 overflow-hidden transition-colors duration-700 ease-in-out"
            style={{backgroundColor: colors.primaryBg, color: colors.primaryText}}
        >
            <div className="w-full max-w-4xl px-6 md:px-10 mx-auto text-center">
                <motion.h2 className="text-3xl md:text-4xl font-bold">
                    {title}
                </motion.h2>

                <motion.p
                    className="mt-4 text-sm md:text-base max-w-xl mx-auto"
                    style={{color: colors.secondaryText}}
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.2}}
                >
                    {description}
                </motion.p>

                <motion.div
                    className="mt-8 flex justify-center"
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    <Link href="/contact">
                        <button
                            className="inline-flex items-center gap-2 px-6 py-3 text-sm md:text-base font-semibold rounded-full bg-blue-700 hover:bg-blue-900 text-white shadow-md transition-all duration-300"
                        >
                            {buttonLabel} <FiArrowRight size={18}/>
                        </button>
                    </Link>
                </motion.div>
            </div>
        </section>
    );
};

export default ContactCTA;