<script setup lang="ts">
import type { PropType } from 'vue';

import { ElButton } from 'element-plus';

defineProps({
  categoryList: {
    type: Array as PropType<string[]>,
    required: true,
  },
  active: {
    type: String,
    required: false,
    default: '全部',
  },
});

const emits = defineEmits(['onCategoryClick']); // 定义回调

/** 处理分类点击事件 */
async function handleCategoryClick(category: string) {
  emits('onCategoryClick', category);
}
</script>

<template>
  <div class="mx-0 flex flex-wrap items-center">
    <div
      class="mr-2 flex flex-row"
      v-for="category in categoryList"
      :key="category"
    >
      <ElButton
        size="small"
        round
        :type="category === active ? 'primary' : 'default'"
        @click="handleCategoryClick(category)"
      >
        {{ category }}
      </ElButton>
    </div>
  </div>
</template>
