<script lang="ts" setup>
  import { Image } from 'ant-design-vue';

  defineProps({
    seriesData: {
      type: Array as PropType<Recordable[]>,
      default: () => [],
    },
  });
</script>

<template>
  <div class="flex flex-col items-center justify-between gap-4" style="width: 15%">
    <a-card class="w-full h-30" v-for="(item, index) in seriesData" :key="index">
      <div class="flex">
        <Image :src="item.image" :width="60" :height="60" class="mt-1" />
        <div class="flex flex-col ml-10">
          <p class="text-xs">{{ item.title }}</p>
          <p style="font-size: 22px; font-weight: bold">{{ item.count }}</p>
        </div>
      </div>
    </a-card>
  </div>
</template>