<template>
    <div class="agent-card" @click="$emit('click')">
        <div class="card-header">
            <div class="agent-icon" :style="{ background: agent.imageUrl ? 'transparent' : agent.color }">
                <img v-if="agent.imageUrl" :src="agent.imageUrl" :alt="agent.name" />
                <span v-else>{{ agent.icon }}</span>
            </div>
        </div>
        <h3 class="agent-name">{{ agent.name }}</h3>
        <p class="agent-desc">{{ agent.description }}</p>
        <div class="card-footer">
            <span class="usage-count">{{ agent.usage }} 次使用</span>
            <el-button type="primary" size="small" round>开始对话</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface Agent {
    id: string
    name: string
    description: string
    icon?: string
    imageUrl?: string
    color: string
    category: string
    usage: number
    apiUrl?: string
}

interface Props {
    agent: Agent
}

defineProps<Props>()
defineEmits<{
    click: []
}>()
</script>

<style lang="scss" scoped>
@import url('./AgentCard.scss');
</style>
