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

interface ContentSectionProps {
    id: string;
    layout?: string;
    colorScheme?: string;
    content?: string;
}

export function ContentSection({
    id,
    layout = 'default',
    colorScheme = 'default',
    content,
}: ContentSectionProps) {
    if (!content) return null;

    return (
        <section
            id={id}
            className={cn(
                'wn-section wn-content',
                `wn-scheme--${colorScheme}`,
                'py-12 md:py-16',
                {
                    'bg-white': colorScheme === 'default',
                    'bg-muted': colorScheme === 'muted',
                    'bg-primary/5': colorScheme === 'primary',
                }
            )}
        >
            <div className="container mx-auto px-4">
                <div
                    className={cn(
                        'prose prose-lg max-w-none',
                        {
                            'max-w-3xl mx-auto': layout === 'narrow',
                            'max-w-4xl mx-auto': layout === 'medium',
                        }
                    )}
                    dangerouslySetInnerHTML={{ __html: content }}
                />
            </div>
        </section>
    );
}
