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

interface HeroSectionProps {
    id: string;
    layout?: string;
    colorScheme?: string;
    title?: string;
    subtitle?: string;
    image?: string;
    cta_text?: string;
    cta_url?: string;
}

export function HeroSection({
    id,
    layout = 'default',
    colorScheme = 'default',
    title,
    subtitle,
    image,
    cta_text,
    cta_url,
}: HeroSectionProps) {
    const isImageLeft = layout === 'hero-left-image' || layout === 'image-left';
    const isImageRight = layout === 'hero-right-image' || layout === 'image-right';
    const isCentered = layout === 'centered' || layout === 'default';

    return (
        <section
            id={id}
            className={cn(
                'wn-section wn-hero',
                `wn-hero--${layout}`,
                `wn-scheme--${colorScheme}`,
                'relative overflow-hidden',
                {
                    'bg-primary text-primary-foreground': colorScheme === 'primary',
                    'bg-secondary text-secondary-foreground': colorScheme === 'secondary',
                    'bg-muted': colorScheme === 'muted',
                    'bg-gradient-to-r from-primary/10 to-secondary/10': colorScheme === 'gradient',
                }
            )}
        >
            <div className={cn(
                'container mx-auto px-4 py-16 md:py-24',
                {
                    'flex flex-col md:flex-row items-center gap-8': isImageLeft || isImageRight,
                    'text-center': isCentered,
                }
            )}>
                {/* Image - Left */}
                {image && isImageLeft && (
                    <div className="w-full md:w-1/2">
                        <img
                            src={image}
                            alt={title || 'Hero image'}
                            className="w-full h-auto rounded-lg shadow-xl"
                        />
                    </div>
                )}

                {/* Content */}
                <div className={cn(
                    'wn-hero__content',
                    {
                        'w-full md:w-1/2': isImageLeft || isImageRight,
                        'max-w-3xl mx-auto': isCentered,
                    }
                )}>
                    {title && (
                        <h1 className="wn-hero__title text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                            {title}
                        </h1>
                    )}

                    {subtitle && (
                        <p className="wn-hero__subtitle text-lg md:text-xl text-opacity-80 mb-8">
                            {subtitle}
                        </p>
                    )}

                    {cta_text && cta_url && (
                        <a
                            href={cta_url}
                            className="wn-hero__cta inline-block px-8 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors"
                        >
                            {cta_text}
                        </a>
                    )}
                </div>

                {/* Image - Right */}
                {image && isImageRight && (
                    <div className="w-full md:w-1/2">
                        <img
                            src={image}
                            alt={title || 'Hero image'}
                            className="w-full h-auto rounded-lg shadow-xl"
                        />
                    </div>
                )}

                {/* Centered Image */}
                {image && isCentered && (
                    <div className="mt-12">
                        <img
                            src={image}
                            alt={title || 'Hero image'}
                            className="w-full max-w-4xl mx-auto h-auto rounded-lg shadow-xl"
                        />
                    </div>
                )}
            </div>
        </section>
    );
}
