<template>
  <div class="waterfall-container" ref="container">
    <div
        v-for="(column, columnIndex) in columns"
        :key="columnIndex"
        class="waterfall-column"
        :style="{ width: `${100 / columnCount}%` }"
    >
      <div
          v-for="item in column"
          :key="item.id"
          class="waterfall-item"
      >
        <slot :item="item">
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  columnCount: {
    type: Number,
    default: 2
  }
})

const columns = ref([])

const calculateColumns = () => {
  const cols = Array.from({ length: props.columnCount }, () => [])
  props.items.forEach((item, index) => {
    const columnIndex = index % props.columnCount
    cols[columnIndex].push(item)
  })

  columns.value = cols
}
watch(() => props.items, () => {
  calculateColumns()
}, { deep: true })

onMounted(() => {
  calculateColumns()
})
</script>

<style scoped>
.waterfall-container {
  display: flex;
  width: 100%;
  gap: 16px;
}

.waterfall-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.waterfall-item {
  break-inside: avoid;
}

</style>