import React from "react";

interface HeroSecondProps {
    title: string;
}

export default function HeroSecond({ title }: HeroSecondProps) {
    return (
        <>
            <div className="container max-w-5xl">
                <div className="flex justify-center items-center relative overflow-hidden mx-auto">
                    {/* Background Image */}
                    <img
                        src="/assets/hero-second.jpg"
                        alt="Hero Section"
                        className="w-full object-cover rounded-lg md:rounded-3xl"
                    />

                    {/* Overlay Content */}
                    <div className="absolute inset-0 flex flex-col items-center justify-center">
                        <h1 className="text-2xl md:text-5xl font-bold text-gray-800 mb-4 text-center md:text-right absolute md:right-24 top-1/2 -translate-y-1/2">
                            {title}
                        </h1>
                    </div>
                </div>
            </div>
        </>
    );
}