---
import { fetchGlobalData } from "@utils/data/global/index.js";

const { image, alt } = Astro.props;
const { globals } = await fetchGlobalData(Astro);
---

<div class="hero">
  <img
    srcset={`
      ${globals.cdn_url}${image}?class=bannersm&type=webp 256w,
      ${globals.cdn_url}${image}?class=bannermd&type=webp 512w,
      ${globals.cdn_url}${image}?class=bannerbase&type=webp 1024w
    `}
    sizes="(max-width: 450px) 256px,
            (max-width: 850px) 512px,
            1024px"
    src={`${globals.cdn_url}${image}?class=bannersm&type=webp`}
    alt={alt}
    class="image-banner"
    loading="lazy"
    decoding="async"
    width="720"
    height="480"
  />
</div>