"use client"
import { NodeResizeControl } from "@xyflow/react"

/** 节点右边缘 resize 把手：高度跟随节点，宽度可拖（240–1200px）。平时透明，hover 显紫色细条。 */
export function ResizeRight({ minWidth = 240, maxWidth = 1200 }: { minWidth?: number; maxWidth?: number }) {
  return (
    <NodeResizeControl
      position="right"
      minWidth={minWidth}
      maxWidth={maxWidth}
      style={{
        background: "transparent",
        border: "none",
        width: 10,
        height: "calc(100% - 24px)",  // 留出顶部 source Handle 圆点的 hover 空间
        right: 0,                      // hit area 完全在节点内侧右边 10px（ReactFlow wrapper 不允许外溢）
        top: 12,
        transform: "none",
        zIndex: 20,                    // 高于 ReactFlow handle 默认 z-index
      }}
    >
      <div
        className="absolute right-0 top-0 h-full w-1 hover:w-1.5 bg-transparent hover:bg-violet-400/70 active:bg-violet-400 transition-all rounded-r"
        style={{ cursor: "ew-resize" }}
      />
      <div
        className="w-full h-full"
        style={{ cursor: "ew-resize" }}
      />
    </NodeResizeControl>
  )
}