import type { ComponentProps } from 'react'
import { Handle, type HandleProps } from '@xyflow/react'
import { cn } from '@/lib/utils'

export type BaseHandleProps = HandleProps

export function BaseHandle({ className, children, ...props }: ComponentProps<typeof Handle>) {
  return (
    <Handle
      {...props}
      className={cn(
        'h-3 w-3 rounded-full border border-accent/60 bg-card transition-opacity',
        'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100',
        '[.rf-connect-mode_&]:opacity-100',
        className,
      )}
    >
      {children}
    </Handle>
  )
}
