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

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

  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',

  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',

  props.side !== 'break' ? 'md:flex' : '',

  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',

  props.class,
])
</script>

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

<style scoped></style>
