<script setup>
import BaseNode from './BaseNode.vue'
import { ChatbubbleEllipsesOutline } from '@vicons/ionicons5'

const props = defineProps({
  data: { type: Object, default: () => ({ label: '用户输入', variables: [] }) }
})
</script>

<template>
  <BaseNode :data="data" :has-target="false" color="#10B981">
    <template #icon><ChatbubbleEllipsesOutline /></template>
    <template #body>
      <div v-if="data?.variables?.length" class="io-summary">
        <span v-for="v in data.variables" :key="v.name" class="io-tag io-in">{{ v.name }}</span>
      </div>
      <div v-else class="output-hint">未配置变量</div>
    </template>
  </BaseNode>
</template>

<script>
export default { name: 'InputNode' }
</script>

<style scoped>
.io-summary { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.io-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}
.io-in { background: rgba(99,102,241,0.15); color: #818cf8; }
.io-out { background: rgba(34,197,94,0.15); color: #4ade80; }
.output-hint { font-size: 11px; color: var(--text-tertiary, #888); }
</style>
