"use client"

import { memo } from "react"
import { BaseEdge, getSmoothStepPath, type EdgeProps } from "@xyflow/react"
import { cn } from "@/shared/lib/utils"

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

  const isHighlighted = (data as { isHighlighted?: boolean } | undefined)?.isHighlighted ?? false

  return (
    <BaseEdge
      id={id}
      path={edgePath}
      className={cn(
        "transition-opacity",
        isHighlighted ? "opacity-100" : "opacity-30",
      )}
      style={{
        stroke: "currentColor",
        strokeWidth: 2,
        strokeDasharray: "6 4",
      }}
    />
  )
}

export const GraphPrerequisiteEdge = memo(GraphPrerequisiteEdgeComponent)