<!-- 
    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--overflow--${overflow}`,
            `page-section--${tone}`,
            `page-section--padded--${padded_size}`
        ]"
    >
        <!-- Si content == true -->
        <PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb" :position="position" :overflow="overflow">
            <slot />
        </PageSectionInner>

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

    </section>
</template>

<script setup>
    const props = defineProps({
        tone: { type: String, default: 'default' },        // Background 
        padded_size: { type: String, default: '' }, // none | sm | md | lg
        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
        position : { type: String, default: '' },
        overflow : { type: String, default: '' }
    })
</script>

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

        /* 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); }
        &--jaune { background: var(--c-background-jaune); }
        &--rouge45 { background: var(--c-brand_rouge45); }
        &--rouge-weak { background: var(--c-brand_rouge-weak); }

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

</style>
