import React from "react";

type SmallHeroProps = {
    title: string;
    subtitle?: string;
    backgroundImage?: string; // Optional background image
};

const SmallHero = ({title, subtitle, backgroundImage}: SmallHeroProps) => {
    return (
        <div
            className="w-full py-20 text-center flex flex-col items-center justify-center bg-cover bg-center"
            style={{
                backgroundColor: backgroundImage ? "transparent" : "var(--primary-bg)", // Fallback if no image
                color: "var(--primary-text)",
                backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
                backgroundSize: "cover",
                backgroundPosition: "center",
                backgroundBlendMode: "overlay",
                transition: "background-color 0.4s ease-in-out, color 0.4s ease-in-out",
            }}
        >
            <h1 className="text-3xl sm:text-4xl font-bold"
                data-aos="fade-up"
            >
                {title}
            </h1>
            {subtitle &&
                <p className="mt-2 text-lg text-[var(--secondary-text)]"
                   data-aos="fade-up"
                   data-aos-delay="200"
                >
                    {subtitle}
                </p>
            }
        </div>
    );
};

export default SmallHero;