<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    column?: 1 | 2 | 3
    density?: 'default' | 'dense'
    side?: 'default' | 'break'
    position?: 'default' | 'dynamic'
    layout?: 'default' | 'stacked'
    class?: string
  }>(),
  {
    column: 1,
    density: 'default',
    side: 'default',
    position: 'default',
    layout: 'stacked',
    class: '',
  },
)

const widthClass = computed(() => {
  if (props.column === 1) return 'md:w-full pe-4'
  if (props.column === 2) return 'md:w-1/2 pe-4'
  if (props.column === 3) return 'md:w-1/3 pe-4'
  return 'w-full'
})

const wrapperClass = computed(() => [
  'w-full flex-shrink-0',
  widthClass.value,

  props.layout === 'stacked' ? 'flex flex-col' : 'md:flex',

  // Only add margin bottom if no custom class overrides it
  props.class?.includes('mb-') ? '' : (props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : 'mb-3'),
  props.class,
])
</script>

<template>
  <div :class="wrapperClass">
    <slot />
  </div>
</template>
