<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon, PauseIcon, PlayIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="images.length" autoplay loop>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
        <img :src="image.src" :alt="image.alt" width="500" height="300" />
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.Control :class="styles.Control" data-justify="center">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.AutoplayTrigger :class="styles.AutoplayTrigger">
        <Carousel.AutoplayIndicator>
          <template #fallback><PlayIcon /></template>
          <PauseIcon />
        </Carousel.AutoplayIndicator>
      </Carousel.AutoplayTrigger>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
  </Carousel.Root>
</template>
