<script setup lang="ts">
import ACarousel from "#adata-ui/components/elements/carousel/ACarousel.vue";

const items = [
  'https://picsum.photos/600/800?random=1',
  'https://picsum.photos/600/800?random=2',
  'https://picsum.photos/600/800?random=3',
  'https://picsum.photos/600/800?random=4',
  'https://picsum.photos/600/800?random=5',
  'https://picsum.photos/600/800?random=6'
]
</script>

<template>
  <Story
    title="Elements/Carousel"
  >
    <Variant title="Carousel">
      <template #default>
        <div class="p-4 rounded bg-white">
          <a-carousel
            :items="items"
            :indicators="true"
            :default-ui="{ item: 'basis-full ' }"
          >
            <template #default="{ item }">
              <div class="flex gap-4 p-2">
                <div>
                  loremm inpusum loremm inpusum loremm inpusum loremm inpusum loremm inpusum loremm inpusum loremm
                  inpusum loremm inpusum loremm inpusum loremm inpusum loremm inpusum
                </div>
                <img width="150px" height="150px" :src="item" alt="sdf">
              </div>
            </template>

          </a-carousel>
        </div>
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
