"use client";
import type { HeroBlock } from "@/types/page";

export default function HeroBlockView({ title, subtitle, backgroundImage, ctaText, ctaLink }: HeroBlock) {
    return (
        <section
            className="relative h-[56vh] flex flex-col justify-center items-center text-white text-center rounded-2xl overflow-hidden"
            style={{
                backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
                backgroundSize: "cover",
                backgroundPosition: "center"
            }}
        >
            <div className="backdrop-brightness-75 p-6 w-full h-full flex flex-col justify-center items-center">
                <h1 className="text-4xl md:text-5xl font-semibold mb-4">{title}</h1>
                {subtitle && <p className="mt-2 opacity-90 text-lg md:text-xl max-w-2xl">{subtitle}</p>}
                {ctaText && (
                    <a
                        href={ctaLink ?? "#"}
                        className="mt-8 inline-block px-8 py-3 rounded-xl bg-white/90 text-black hover:bg-white transition-all duration-200 font-medium"
                    >
                        {ctaText}
                    </a>
                )}
            </div>
        </section>
    );
}