<script setup lang="ts">
import { Code } 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.code.label')"
    :inputs="[{ id: 'target' }]"
    :outputs="[{ id: 'source' }]"
    :node-id="id"
    node-type="code"
  >
    <template #icon><Code class="size-5" /></template>
    <template #desc>{{ $t('ai-platform.workflow.nodes.code.desc') }}</template>

    <div class="space-y-2">
      <div class="flex items-center justify-between">
        <span class="text-muted-foreground">{{
          $t('ai-platform.workflow.nodes.code.language')
        }}</span>
        <span
          class="text-primary bg-primary/10 rounded px-2 font-mono text-[10px]"
        >
          {{ data.language || 'python3' }}
        </span>
      </div>

      <div
        v-if="data.inputs && data.inputs.length > 0"
        class="text-muted-foreground"
      >
        {{ $t('ai-platform.workflow.nodes.code.input') }}
        {{ data.inputs.map((i: any) => i.variable).join(', ') }}
      </div>
    </div>
  </BaseNode>
</template>
