import React from 'react'
import { Handle, Position } from '@xyflow/react'
import { Circle, CircleDashed } from 'lucide-react'

type NodeHandleProps = {
    id: string
}

export function InputHandle({ id }: NodeHandleProps) {
    return (
        <Handle
            type="target"
            position={Position.Left}
            id={id}
            style={{
                top: 20,
                width: 20,
                height: 20,
                left: -10,
                borderRadius: '9999px',
                background: 'transparent',
                border: 'none',
                padding: 0,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <CircleDashed className="w-4 h-4 text-muted-foreground pointer-events-none" />
        </Handle>
    )
}

export function OutputHandle({ id }: NodeHandleProps) {
    return (
        <Handle
            type="source"
            position={Position.Right}
            id={id}
            style={{
                top: 20,
                width: 20,
                height: 20,
                right: -10,
                borderRadius: '9999px',
                background: 'transparent',
                border: 'none',
                padding: 0,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <Circle className="w-4 h-4 text-foreground pointer-events-none" />
        </Handle>
    )
}