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

interface ImageTextSectionProps {
    id: string;
    layout?: string;
    colorScheme?: string;
    title?: string;
    text?: string;
    image?: string;
    elementStyles?: Record<string, any>;
}

export function ImageTextSection({
    id,
    layout = 'image-left',
    colorScheme = 'default',
    title,
    text,
    image,
    cta_text,
    cta_url,
    elementStyles,
    styles,
}: ImageTextSectionProps & { styles?: Record<string, any>, cta_text?: string, cta_url?: string }) {
    const isImageLeft = layout === 'image-left' || layout === 'left';
    const isImageRight = layout === 'image-right' || layout === 'right';

    // Helper to get text styles (including font family)
    const getTextStyles = (elementName: string) => {
        const styles = 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,
                borderColor: styles.borderColor,
                borderWidth: styles.borderWidth,
                borderRadius: styles.borderRadius,
            }
        };
    };

    const titleStyle = getTextStyles('title');
    const textStyle = getTextStyles('text');
    const buttonStyle = getTextStyles('button');

    const imageStyle = elementStyles?.['image'] || {};

    // Height preset support
    const heightPreset = styles?.heightPreset || 'default';
    const heightMap: Record<string, string> = {
        'default': 'py-12 md:py-24',
        'small': 'py-8 md:py-16',
        'medium': 'py-16 md:py-32',
        'large': 'py-24 md:py-48',
        'screen': 'min-h-screen py-20 flex items-center',
    };
    const heightClasses = heightMap[heightPreset] || 'py-12 md:py-24';

    return (
        <section
            id={id}
            className={cn(
                'wn-section wn-image-text',
                `wn-scheme--${colorScheme}`,
                heightClasses,
                {
                    'bg-muted': colorScheme === 'muted',
                    'bg-primary/5': colorScheme === 'primary',
                }
            )}
        >
            <SharedContentLayout
                title={title}
                text={text}
                image={image}
                imagePosition={isImageRight ? 'right' : 'left'}
                containerWidth={styles?.contentWidth === 'full' ? 'full' : 'contained'}
                titleStyle={titleStyle.style}
                titleClassName={titleStyle.classNames}
                textStyle={textStyle.style}
                textClassName={textStyle.classNames}
                imageStyle={{
                    backgroundColor: imageStyle.backgroundColor,
                    objectFit: imageStyle.objectFit,
                }}
                buttons={cta_text && cta_url ? [{ text: cta_text, url: cta_url }] : []}
                buttonStyle={{
                    classNames: buttonStyle.classNames,
                    style: buttonStyle.style
                }}
            />
        </section>
    );
}