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

type Props = {
  as?: HTMLElement;
  className?: string;
  id?: string;
  backgroundImage: any;
  backgroundAlt: string;
};

const {
  as = 'div',
  className = '',
  id = '',
  backgroundImage,
  backgroundAlt,
}: Props = Astro.props;

const Tag: HTMLElement = as;
---

<Tag class={`${className}`} id={id}>
  <div class="banner py-10 position-relative">
    <figure class="banner__background-container-image">
      <div class="overlay"></div>
      <Image src={backgroundImage} alt={backgroundAlt} />
    </figure>
    <slot />
  </div>
</Tag>