import React, { useMemo } from "react";
import { useSelectionContext } from "../useSelection";

type AddressHighlighterProps = React.PropsWithChildren<{
  address: string;
}>;

const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
  address,
  children,
}) => {
  const [selection, setSelection] = useSelectionContext();
  const [select, deselect] = useMemo(() => {
    const _select = () => {
      setSelection({ type: "address", content: address });
    };
    const _deselect = () => {
      setSelection(null);
    };
    return [_select, _deselect];
  }, [setSelection, address]);

  return (
    <div
      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
        selection !== null &&
        selection.type === "address" &&
        selection.content === address
          ? "border-orange-400 bg-yellow-100"
          : "border-transparent"
      }`}
      onMouseEnter={select}
      onMouseLeave={deselect}
    >
      {children}
    </div>
  );
};

export default React.memo(AddressHighlighter);