<template>
  <div class="flex items-center justify-center">
    <el-space :size="space">
      <div v-for="item in props.actionIcons" :key="item.label" @click="item.onClick">
        <el-tooltip :content="item.label" effect="light">
          <el-icon v-if="item.type === 'icon'" :color="props.color" :size="props.size">
            <component :is="item.icon" />
          </el-icon>
          <img v-if="item.type === 'img'" :src="item.icon" :style="{ width: `${props.size}px` }" />
        </el-tooltip>
        <div
          v-if="item.type === 'wordsincomplete'"
          style="color: rgb(17, 153, 232); cursor: pointer"
          >{{ item.label }}</div
        >
      </div>
    </el-space>
  </div>
</template>

<script setup lang="ts">
  import { ActionItem } from '@/components/Table';

  const props = defineProps<{
    space: number;
    size: number;
    color: string;
    style: 'img' | 'icon';
    actionIcons: ActionItem[];
  }>();
</script>

<style scoped></style>
