<script setup lang="ts">
const props = defineProps({
  id: {type: String, default: undefined},

  padTop: {type: Boolean, default: true},
  padBottom: {type: Boolean, default: true}
})
</script>

<template>
  <!-- bind the id → renders only when props.id is truthy -->
  <section :id="props.id" class="w-full">
    <AppStripe>
      <div :class="[
            props.padTop    && 'pt-12',
            props.padBottom && 'pb-12'
          ]">
        <div class="bg-neutral-100 border border-neutral-200">
          <slot/>
        </div>
      </div>
    </AppStripe>
  </section>
</template>
