---
import { Image } from 'astro:assets';

interface Props {
    hero: HeroComponent;
}

const hero = Astro.props.hero;
---

<div id={`hero-${hero.id}`} class="flex w-full">
    <div class="flex w-full h-screen static">
        <Image
            src={hero.backgroundImage.url}
            width={hero.backgroundImage.width}
            height={hero.backgroundImage.height}
            class="flex w-full h-screen object-cover z-1"
            alt=""
        />

        <div class="absolute flex items-center w-full h-screen bg-[#00000082] z-10">
            <div class="absolute text-white lg:left-40 lg:p-8 p-16 z-30">
                <div class="flex flex-col gap-2.5 text-left">
                    <h1 class="text-white font-bold md:text-8xl sm:text-7xl text-6xl w-fit">{hero.title}</h1>
                    { hero.text !== null && (
                        <div class="lg:text-2xl text-lg max-w-170">{hero.text}</div>
                    ) }
                </div>
            </div>
        </div>
    </div>
</div>