<template>
  <div class="virtual-scroll-container" ref="containerRef">
    <RecycleScroller
      class="scroller"
      :items="items"
      :item-size="itemSize"
      :key-field="'id'"
    >
      <template #default="{ item }">
        <div class="scroll-item">
          <component :is="item.component" v-bind="item.props" />
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

interface ScrollItem {
  id: string
  component: any
  props?: Record<string, any>
}

interface Props {
  items: ScrollItem[]
  itemSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  itemSize: 1200,
})

const containerRef = ref<HTMLElement>()
</script>

<style lang="scss" scoped>
.virtual-scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .scroller {
    width: 100%;
    height: 100%;
  }

  .scroll-item {
    width: 100%;
  }
}
</style>
