import { useBoardConnectors, type ConnectorStyle } from '../../hooks/useBoardConnectors';

export function BoardConnectors({
  enabled = true,
  style = 'default',
}: {
  enabled?: boolean;
  style?: ConnectorStyle;
}) {
  const { svgRef, lineGroupRef, dotSvgRef, dotGroupRef } = useBoardConnectors(enabled, style);

  return (
    <>
      <svg ref={svgRef} className="connectors" aria-hidden="true">
        <g ref={lineGroupRef} id="connector-lines" />
      </svg>
      {style === 'reference' && (
        <svg ref={dotSvgRef} className="connectors connectors--dots" aria-hidden="true">
          <g ref={dotGroupRef} id="connector-dots" />
        </svg>
      )}
    </>
  );
}
