<template>
  <div class="llm-node">
    <StandardNode
      :icon="definition.icon"
      :title="definition.title"
      :subtitle="definition.subtitle"
      :accent="definition.accent"
      :badge="badge"
      :status="status"
      :handles="definition.handles"
      :body-items="bodyItems"
      :selected="props.selected"
    />
  </div>
</template>

<script setup lang="ts">
import { Position } from '@vue-flow/core'
import StandardNode from '../shared/StandardNode.vue'
import { useStandardNode } from '../shared/useStandardNode'
import type { BaseNodeProps } from '../shared/types'
import type { LLMNodeData } from './types'

const props = defineProps<BaseNodeProps<LLMNodeData>>()

const { definition, bodyItems, badge, status } = useStandardNode(props, {
  icon: 'mdi:robot',
  title: '大模型',
  subtitle: 'LLM Inference',
  accent: '#722ed1',
  handles: {
    inputs: [Position.Left],
    outputs: [Position.Right]
  },
  badge: ({ data }) => data.model ?? '未选择',
  status: ({ data }) => data.status ?? '空闲',
  body: ({ data }) => [
    { label: '模型', value: data.model ?? '未配置' },
    { label: '温度', value: `${data.temperature ?? 0.7}` }
  ]
})
</script>

<style scoped lang="scss">
@use './index.scss' as *;
</style>
