<template>
  <span :class="['tool-call-indicator', `tool-call-indicator--${type}`]">
    <component :is="icon" class="tool-call-indicator__icon" />
    <span class="tool-call-indicator__label">{{ name }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed, type Component } from 'vue'
import {
  ReadOutlined,
  EditOutlined,
  CodeOutlined,
  FileAddOutlined,
  SearchOutlined,
  FolderOpenOutlined,
} from '@ant-design/icons-vue'

const props = defineProps<{
  type: string
  name: string
}>()

const iconMap: Record<string, Component> = {
  read: ReadOutlined,
  edit: EditOutlined,
  bash: CodeOutlined,
  write: FileAddOutlined,
  search: SearchOutlined,
  grep: SearchOutlined,
  glob: FolderOpenOutlined,
}

const icon = computed(() => iconMap[props.type] || CodeOutlined)
</script>

<style scoped>
.tool-call-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

.tool-call-indicator__icon {
  font-size: 10px;
}

.tool-call-indicator--read {
  background: var(--color-info-light);
  color: var(--color-info);
}

.tool-call-indicator--edit {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.tool-call-indicator--bash {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.tool-call-indicator--write {
  background: var(--color-success-light);
  color: var(--color-success);
}

.tool-call-indicator--search,
.tool-call-indicator--grep,
.tool-call-indicator--glob {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
</style>
