---
import {type ImageMetadata} from "astro";
import {Picture} from "astro:assets";

export type Props = {
	image: ImageMetadata,
	alt: string
}
---
<div class="relative text-white overflow-hidden h-80">
	<div class="inset-0 absolute pointer-events-none">
		<Picture src={Astro.props.image} alt={Astro.props.alt}
				 class="object-cover object-center w-full h-full"></Picture>
		<div class="absolute inset-0 bg-black opacity-30"></div>
	</div>
	<div class="relative z-10 flex flex-col justify-center items-center h-full text-center">
		<slot/>
	</div>
</div>