<script setup lang="ts">
import type {AgentStudioConnectionView} from './types';

defineProps<{
  connections: AgentStudioConnectionView[];
}>();
</script>

<template>
  <svg class="agent-studio-edge-layer" aria-hidden="true">
    <path
      v-for="connection in connections"
      :key="connection.id"
      class="agent-studio-edge-layer__path"
      :class="{ 'is-active': connection.active }"
      :d="connection.path"
      :data-source-id="connection.sourceId"
      :data-target-id="connection.targetId"
    />
  </svg>
</template>

<style scoped>
.agent-studio-edge-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.agent-studio-edge-layer__path {
  fill: none;
  stroke: var(--el-border-color);
  stroke: color-mix(
    in srgb,
    var(--el-color-primary) 30%,
    var(--el-border-color)
  );
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.agent-studio-edge-layer__path.is-active {
  stroke: var(--el-color-primary);
  stroke-width: 2.2;
}
</style>
