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

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,
    isEditor,
}: ImageTextSectionProps & { styles?: Record<string, any>, cta_text?: string, cta_url?: string, isEditor?: boolean }) {
    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'] || {};

    const sectionBg = getSectionBackground(styles);

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