import React from 'react';
import { cn } from '@/lib/utils';
import { ArrowRight } from 'lucide-react';

interface Section {
    id: string;
    type: string;
    layoutVariant?: string;
    colorScheme?: string;
    props: Record<string, { type: 'static' | 'dynamic'; value?: string; source?: string }>;
    elementStyles?: Record<string, any>;
}

interface CTABannerRendererProps {
    section: Section;
    className?: string;
}

const COLOR_SCHEMES: Record<string, { bg: string; text: string; btnBg: string; btnText: string }> = {
    default: { bg: '', text: 'text-gray-900', btnBg: 'bg-blue-600', btnText: 'text-white' },
    primary: { bg: 'bg-blue-600', text: 'text-white', btnBg: 'bg-white', btnText: 'text-blue-600' },
    secondary: { bg: 'bg-gray-800', text: 'text-white', btnBg: 'bg-white', btnText: 'text-gray-800' },
    muted: { bg: 'bg-gray-50', text: 'text-gray-700', btnBg: 'bg-gray-800', btnText: 'text-white' },
    gradient: { bg: 'bg-gradient-to-r from-purple-600 to-blue-500', text: 'text-white', btnBg: 'bg-white', btnText: 'text-purple-600' },
};

export function CTABannerRenderer({ section, className }: CTABannerRendererProps) {
    const scheme = COLOR_SCHEMES[section.colorScheme || 'primary'];

    const title = section.props?.title?.value || 'Ready to get started?';
    const text = section.props?.text?.value || 'Join thousands of happy customers today.';
    const buttonText = section.props?.button_text?.value || 'Get Started';
    const buttonUrl = section.props?.button_url?.value || '#';

    // Helper to get text styles (including font family)
    const getTextStyles = (elementName: string) => {
        const styles = section.elementStyles?.[elementName] || {};
        return {
            classNames: cn(
                styles.fontSize,
                styles.fontWeight,
                {
                    'font-sans': styles.fontFamily === 'secondary',
                    'font-serif': styles.fontFamily === 'primary',
                }
            ),
            style: {
                color: styles.color,
                textAlign: styles.textAlign,
                backgroundColor: styles.backgroundColor
            }
        };
    };

    const titleStyle = getTextStyles('title');
    const textStyle = getTextStyles('text');
    const btnStyle = getTextStyles('button_text');

    return (
        <div className={cn('py-12 px-4 md:py-20 md:px-8', scheme.bg, scheme.text, className)}>
            <div className="max-w-4xl mx-auto text-center space-y-6">
                <h2
                    className={cn(
                        !titleStyle.classNames && "text-3xl md:text-4xl font-bold",
                        titleStyle.classNames
                    )}
                    style={titleStyle.style}
                >
                    {title}
                </h2>
                <p
                    className={cn(
                        "max-w-2xl mx-auto",
                        !textStyle.classNames && "text-lg opacity-90",
                        textStyle.classNames
                    )}
                    style={textStyle.style}
                >
                    {text}
                </p>
                <button className={cn(
                    'inline-flex items-center gap-2 px-8 py-4 rounded-lg font-semibold transition hover:opacity-90',
                    !btnStyle.style?.backgroundColor && scheme.btnBg,
                    !btnStyle.style?.color && scheme.btnText,
                    btnStyle.classNames
                )}
                    style={btnStyle.style}
                >
                    {buttonText}
                    <ArrowRight className="w-5 h-5" />
                </button>
            </div>
        </div>
    );
}