<template>
  <div class="agent-card">
    <div class="header-section">
      <div class="image-container">
        <img :src="cozeInfo.icon_url" alt="" />
      </div>
    </div>
    <div class="info-section">
      <div class="title-group">
        <a-tooltip :content="cozeInfo.name">
          <div class="title">{{ cozeInfo.name }}</div>
        </a-tooltip>
        <div class="tag">
          <div>
            <img class="status-icon" :src="chatbotIcon" />
          </div>
          <div class="text">对话式</div>
        </div>
      </div>
      <div class="usage-info">
        <a-space>
          <span class="count">{{ cozeInfo.views }}</span>
        </a-space>
        <a-space>
          <span class="label"> 次使用 </span>
        </a-space>
      </div>
    </div>
    <div class="description-section">
      <div class="description">
        {{ cozeInfo.description }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import chatbotIcon from '@/assets/svg/chatbot.svg';

const props = defineProps({
  cozeInfo: {
    type: Object as () => any,
    default: () => ({}),
  },
});

onMounted(() => {});
</script>

<style scoped>
@import './history.scss';
</style>
