<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  mode: 'flat' | 'card'
}>()

const classes = useStyling(
  'appSection',
  {
    slots: {
      background: 'w-full h-full',
      container: '',
    },
    variants: {
      mode: {
        flat: {
          background: 'bg-neutral-100 border-t border-b border-neutral-200',
          container: 'rpy-3',
        },
        card: {
          container: 'rmy-3 bg-neutral-100 border border-neutral-200',
        },
      },
    },
  },
  props
)
</script>

<template>
  <XScaffoldContent>
    <template #background>
      <div :class="classes.background" />
    </template>

    <section :class="classes.container">
      <slot />
    </section>
  </XScaffoldContent>
</template>
