---
interface Props {
  anchorLink: string;
  background?: string;
  bgImageUrl?: string;
}

const { anchorLink, background, bgImageUrl } = Astro.props;

const backgroundColor =background ?? "transparent";
const backgroundImage = bgImageUrl ? `url(${bgImageUrl})` : "none";
---

<section class="slide-container" id={"slide-" + anchorLink}>
    <slot name="main-slide" />
    <slot />
</section>

<style define:vars={{ backgroundColor, backgroundImage }}>
    .slide-container {
        background-color: var(--backgroundColor);
        background-image: var(--backgroundImage);
        width: 100dvw;
        height: 100dvh;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: start;
        scroll-snap-type: x mandatory;
		scroll-snap-align: start;
        overflow-x: auto;
		flex-shrink: 0;
    }
</style>