'use client';

import React, {useContext} from "react";
import {ThemeContext} from "@/components/provider/ThemeProvider";
import {themeColors} from "@/components/Helper/ThemeColors";
import {motion} from "framer-motion";

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

const SmallHero = ({title, subtitle, backgroundImage, blurBackground}: SmallHeroProps) => {
    const {theme} = useContext(ThemeContext);
    const colors = themeColors[theme];

    const primaryTextColor = backgroundImage ? "#ffffff" : colors.primaryText;
    const secondaryTextColor = backgroundImage ? "rgba(255, 255, 255, 0.8)" : "#6B7280"; // Tailwind gray-500

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

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

export default SmallHero;