<template>
  <div
    class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
    <TransitionGroup name="slide_left">
      <PlaquetteBox
        v-for="(item, i) in plaquettes"
        :key="i"
        is="button"
        @click="click(item)"
        class="h-11 border"
        :class="{
          'text-stone-600 border-stone-600': !item.free,
          'hover:border-white': item.free,
        }"
        :style="{ transitionDelay: `${initDelay * i}ms` }"
        :dynamic-size="true">
        {{ item.value }}
      </PlaquetteBox>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
import { Plaquette } from '@/types'

defineProps<{
  plaquettes: Plaquette[]
}>()

const emit = defineEmits<{
  (e: 'clickNumber', item: Plaquette): void
}>()

const initDelay = ref(100)

function click(item: Plaquette): void {
  initDelay.value = 0
  emit('clickNumber', item)
}
</script>
