<template>
  <div>
    <div
      v-for="{ name, value } in results"
      :key="name"
      class="result backdrop-blur-xl w-full max-w-[316px] rounded-12 bg-[#fff] pt-16 pr-32 pb-20 pl-32 shadow-[#04040405]">
      <div
        class="name1 mb-10 flex items-center text-16 font-regular accent-gray-700">
        {{ name }}
      </div>
      <Vue3AutoCounter
        :autoinit="true"
        :duration="3"
        :end-amount="value"
        :start-amount="value * 0.95"
        class="value1 flex items-center text-40 font-semi-bold accent-gray-1100 mobile:text-24" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Vue3AutoCounter from 'vue3-autocounter';
import { useResultsStore } from '@/store/results';

export default defineComponent({
  components: {
    Vue3AutoCounter,
  },

  async setup() {
    const store = useResultsStore();
    await store.getResults();

    return {
      results: store.results,
    };
  }
});
</script>
