'use client'

import {motion} from 'framer-motion'
import clsx from 'clsx'

type SmallHeroProps = {
    title: string
    subtitle?: string
    backgroundImage?: string
    blurBackground?: boolean
    className?: string
}

const SmallHero = ({
                       title,
                       subtitle,
                       backgroundImage,
                       blurBackground,
                       className = 'py-36'
                   }: SmallHeroProps) => {
    const hasImage = !!backgroundImage

    const baseTextColor = hasImage ? 'text-white' : 'text-foreground'
    const subtitleTextColor = hasImage ? 'text-white/80' : 'text-muted-foreground'

    return (
        <div className={clsx('relative w-full overflow-hidden', className)}>
            {hasImage && blurBackground && (
                <div
                    className="absolute inset-0 bg-cover bg-center blur-sm scale-[1.05] z-0 will-change-transform"
                    style={{backgroundImage: `url(${backgroundImage})`}}
                />
            )}

            <div className="relative z-10 px-6 sm:px-12 max-w-6xl mx-auto">
                <motion.h1
                    className={clsx('text-3xl sm:text-4xl font-bold text-left', baseTextColor)}
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.6}}
                >
                    {title}
                </motion.h1>
                {subtitle && (
                    <motion.p
                        className={clsx('mt-3 text-lg text-left', subtitleTextColor)}
                        initial={{opacity: 0, y: 10}}
                        animate={{opacity: 1, y: 0}}
                        transition={{duration: 0.6, delay: 0.2}}
                    >
                        {subtitle}
                    </motion.p>
                )}
            </div>
        </div>
    )
}

export default SmallHero