import React, { useEffect } from "react";
import { Link } from "react-router-dom";

const ForwardRefLink = React.forwardRef((props, ref) => {
  const { children, setRefAndCid, onMouseOver, onMouseLeave, onClick, ...otherProps } = props;

  const handleClick = (event) => {
    if (otherProps.to === "#void") {
      event.preventDefault();
    }
    if (onClick) {
      onClick(event);
    }
  };

  useEffect(() => {
    if (ref.current && typeof setRefAndCid === 'function') {
      setRefAndCid(ref.current);
    }
  }, [ref, setRefAndCid]);

  return (
    <Link 
      ref={ref} 
      {...otherProps}
      onMouseOver={onMouseOver}
      onMouseLeave={onMouseLeave}
      onClick={handleClick}
    >
      {children}
    </Link>
  );
});

export default ForwardRefLink;