<script setup lang="ts">
import { Marquee, useMarquee } from '@ark-ui/vue/marquee'
import button from 'styles/button.module.css'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

const marquee = useMarquee({})
</script>

<template>
  <div class="stack">
    <Marquee.RootProvider :value="marquee" :class="styles.Root">
      <Marquee.Viewport :class="styles.Viewport">
        <Marquee.Content :class="styles.Content">
          <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
            <span :class="styles.ItemLogo">{{ item.logo }}</span>
            <span :class="styles.ItemName">{{ item.name }}</span>
          </Marquee.Item>
        </Marquee.Content>
      </Marquee.Viewport>
    </Marquee.RootProvider>

    <div class="hstack">
      <button :class="button.Root" @click="marquee.pause()">Pause</button>
      <button :class="button.Root" @click="marquee.resume()">Resume</button>
    </div>
  </div>
</template>
