<script setup lang="ts">
import { MessageSquareText } from '@vben/icons';
import { $t } from '@vben/locales';

import BaseNode from './BaseNode.vue';

defineProps(['selected', 'data', 'id']);
</script>

<template>
  <BaseNode
    :selected="selected"
    :execution-status="data.executionStatus"
    :execution-result="data.executionResult"
    :label="data.label || $t('ai-platform.workflow.nodes.message.label')"
    :inputs="[{ id: 'target' }]"
    :outputs="[{ id: 'source' }]"
    :node-id="id"
    node-type="message"
  >
    <template #icon><MessageSquareText class="size-5" /></template>
    <template #desc>
      {{ $t('ai-platform.workflow.nodes.message.desc') }}
    </template>

    <div class="space-y-2">
      <div class="rounded bg-blue-50 px-2 py-1.5 text-xs dark:bg-blue-950">
        <div class="mb-1 font-medium text-blue-700 dark:text-blue-300">
          {{ $t('ai-platform.workflow.nodes.message.content') }}
        </div>
        <div class="line-clamp-3 text-blue-600 dark:text-blue-400">
          {{
            data.content ||
            $t('ai-platform.workflow.nodes.message.configureContent')
          }}
        </div>
      </div>

      <div
        class="text-muted-foreground flex items-center justify-between text-xs"
      >
        <span>{{ $t('ai-platform.workflow.nodes.message.messageType') }}</span>
        <span class="font-medium">{{ data.message_type || 'text' }}</span>
      </div>
    </div>
  </BaseNode>
</template>
