'use client'

/**
 * TopologyEdge — 自定義邊線 (漸層 + CSS 動畫)
 * =============================================
 * Sprint 5 Phase 2
 *
 * 建立時間: 2026-04-08 (台北時區)
 */

import { BaseEdge, getSmoothStepPath, type EdgeProps } from '@xyflow/react'

export function TopologyEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data }: EdgeProps) {
  const [edgePath] = getSmoothStepPath({
    sourceX, sourceY, targetX, targetY,
    sourcePosition, targetPosition,
  })

  const isWarning = data?.status === 'warning'

  return (
    <BaseEdge
      id={id}
      path={edgePath}
      style={{
        stroke: isWarning ? '#F59E0B' : '#d0cdc5',
        strokeWidth: isWarning ? 1.5 : 1,
        strokeDasharray: isWarning ? '4 3' : undefined,
        opacity: 0.6,
      }}
    />
  )
}
