<script setup lang="ts">
import type { BatchToolCard, BatchToolKey } from '../types';

import { IconifyIcon } from '@vben/icons';

import { Button } from 'ant-design-vue';

interface Props {
  activeTool: BatchToolKey | null;
  cards: BatchToolCard[];
}

interface Emits {
  (event: 'toggle', key: BatchToolKey): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();
</script>

<template>
  <div class="pbt-grid">
    <article
      v-for="card in props.cards"
      :key="card.key"
      class="pbt-card"
      :class="[`is-${card.tone}`, { active: props.activeTool === card.key }]"
    >
      <div class="pbt-card-icon">
        <IconifyIcon :icon="card.icon" />
      </div>
      <h3 class="pbt-card-name">{{ card.title }}</h3>
      <p class="pbt-card-desc">{{ card.description }}</p>
      <Button
        type="primary"
        block
        class="pbt-card-action"
        @click="emit('toggle', card.key)"
      >
        {{ props.activeTool === card.key ? '收起' : '开始操作' }}
      </Button>
    </article>
  </div>
</template>
