<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import type { BannerContent } from "$lib/components/banner-content";
    import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
    import type { Snippet } from "svelte";

    let {
        children,
        bannerContent,
    }: {
        children: Snippet,
        bannerContent?: BannerContent;
    } = $props();
</script>

<div class="main-content">
    {#if bannerContent}
        <Banner2 content={bannerContent} />
    {/if}
    
    <ScrollTopButton />
    {@render children()}
</div>

<style>
    .main-content {
        width: 100%;
        max-width: var(--page-width);
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0 24px;
    }

    @media screen and (max-width: 800px) {
        .main-content {
            padding: 0 8px;
        }
    }
</style>