import Image from "next/image";

interface BlogDetailsBannerProps {
    title: string;
    banner_image: string;
    published_date: string;
}

export default function BlogDetailsBanner({
    title,
    banner_image,
    published_date,
}: BlogDetailsBannerProps) {
    return (
        <section className="mt-6 md:mt-16">
            <div className="container">
                <div className="max-w-[1100px] mx-auto">
                    {/* Title */}
                    <h1 className="text-[32px] md:text-[40px] xl:text-[48px] text-[#00204F] font-medium leading-[1.2] mb-8 max-w-[950px] mx-auto text-center">
                        {title}
                    </h1>

                    {/* Banner image — only render if a URL is provided */}
                    {banner_image && (
                        <div className="relative w-full aspect-[16/7] rounded-[16px] overflow-hidden mb-8 md:mb-12">
                            <Image
                                src={banner_image}
                                alt={title}
                                fill
                                priority
                                className="object-cover"
                                sizes="(max-width: 768px) 100vw, 1100px"
                            />
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
}