import { cn } from '@/lib/utils';

interface CTABannerSectionProps {
    id: string;
    layout?: string;
    colorScheme?: string;
    title?: string;
    text?: string;
    button_text?: string;
    button_url?: string;
}

export function CTABannerSection({
    id,
    layout = 'default',
    colorScheme = 'primary',
    title,
    text,
    button_text,
    button_url,
}: CTABannerSectionProps) {
    return (
        <section
            id={id}
            className={cn(
                'wn-section wn-cta-banner',
                `wn-cta-banner--${layout}`,
                `wn-scheme--${colorScheme}`,
                'py-16 md:py-20',
                {
                    'bg-primary text-primary-foreground': colorScheme === 'primary',
                    'bg-secondary text-secondary-foreground': colorScheme === 'secondary',
                    'bg-gradient-to-r from-primary to-secondary text-white': colorScheme === 'gradient',
                    'bg-muted': colorScheme === 'muted',
                }
            )}
        >
            <div className="container mx-auto px-4 text-center">
                {title && (
                    <h2 className="wn-cta-banner__title text-3xl md:text-4xl font-bold mb-4">
                        {title}
                    </h2>
                )}

                {text && (
                    <p className={cn(
                        'wn-cta-banner__text text-lg md:text-xl mb-8 max-w-2xl mx-auto',
                        {
                            'text-white/90': colorScheme === 'primary' || colorScheme === 'gradient',
                            'text-gray-600': colorScheme === 'muted',
                        }
                    )}>
                        {text}
                    </p>
                )}

                {button_text && button_url && (
                    <a
                        href={button_url}
                        className={cn(
                            'wn-cta-banner__button inline-block px-8 py-3 rounded-lg font-semibold transition-all hover:transform hover:scale-105',
                            {
                                'bg-white text-primary': colorScheme === 'primary' || colorScheme === 'gradient',
                                'bg-primary text-white': colorScheme === 'muted',
                            }
                        )}
                    >
                        {button_text}
                    </a>
                )}
            </div>
        </section>
    );
}
