<!-- 
    La section par défaut fait la largeur de la page.
    On peut mettre de la couleur ou pas. 
    C'est le contenu de la section (PageSectionInner) qui aura une marge.
    Et avec "content" à "false" on peut dire aussi qu'on n'utilise pas le PageSectionInner, au cas où...
-->
<template>
    <section
        class="page-section"
        :class="[
            `page-section--${tone}`,
            { 'page-section--padded': padded }
        ]"
    >
        <!-- Si content == true -->
        <PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb">
            <slot />
        </PageSectionInner>

        <!-- Si content == false -->
        <template v-else>
            <slot />
        </template>

    </section>
</template>

<script setup>
    defineProps({
        tone: { type: String, default: 'default' },        // default / brand / muted / dark…
        padded: { type: Boolean, default: true },          // padding vertical
        contentSize: { type: String, default: 'default'}, // narrow/default/wide
        content: { type: Boolean, default: true },       // contenu contraint ou full
        padb : { type: String, default: '' }, // props pour PageSectionInner
        padt : { type: String, default: '' } // props pour PageSectionInner
    })
</script>

<style lang="scss">
    .page-section {
        position: relative;
        width: 100%;
        //min-height: var(--sp-200);

        /* tons = arrière-plan section */
        &--default { background: transparent; }
        &--brand   { background: var(--c-brand_rouge);}
        &--dark    { background: var(--c-backgroud-black); }
        &--brandreverse    { background: var(--c-backgroud-brandreverse); }

        // padding en haut et en bas
        &--padded {
            padding-top: 30px;
            padding-bottom: 50px;
        }

    }

</style>
