<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 classVal = computed(() => {
  let val = ''

  if (props.column === 2) val += 'column-2 '
  else if (props.column === 3) val += 'column-3 '
  else val += 'column-1 '

  if (props.density === 'dense') val += 'density-dense '

  if (props.side === 'break') val += 'side-break '

  if (props.position === 'dynamic') val += 'position-dynamic '

  return (val + (props.class || '')).trim()
})
</script>

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

<style scoped>
.column-1,
.column-2,
.column-3 {
  @apply w-full flex-shrink-0;
}

.column-1:not(.density-dense):not(:last-child),
.column-2:not(.density-dense):not(:last-child),
.column-3:not(.density-dense):not(:last-child) {
  @apply mb-2 md:mb-2.5 xl:mb-3;
}

.column-2:not(.position-dynamic),
.column-3:not(.position-dynamic) {
  @apply pe-4;
}

.column-2:is(.position-dynamic),
.column-3:is(.position-dynamic) {
  @apply ps-4;
}

.column-1:not(.side-break),
.column-2:not(.side-break),
.column-3:not(.side-break) {
  @apply md:flex;
}

.column-2:not(.side-break) {
  @apply md:w-1/2;
}

.column-3:not(.side-break) {
  @apply md:w-1/3;
}
</style>
