<template>
  <div class="roll-number">
    <DigitRoll
      v-for="(d, idx) in digits"
      :key="idx"
      :digit="d"
      :delay="idx * stagger"
      :duration="duration"
      :height="itemHeight"
      :width="itemWidth"
      :initialRoll="true"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import DigitRoll from '../DigitRoll/index.vue'

defineOptions({
  name: 'RollingNumber',
})

const props = defineProps<{
  value: number
  itemHeight?: number
  itemWidth?: number
  duration?: number
  stagger?: number
}>()

const itemHeight = props.itemHeight ?? 60
const itemWidth = props.itemWidth ?? 40
const duration = props.duration ?? 900
const stagger = props.stagger ?? 180

const digits = computed(() => {
  const s = String(Math.max(0, Math.floor(props.value ?? 0)))
  return s.split('').map(Number)
})
</script>

<style scoped lang="less">
.roll-number {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0 8px;
}
</style>
