import React, { useEffect } from "react";
import classNames from "../className";

const TooltipRight = ({
  text,
  tip,
  opened,
}: {
  text: any;
  tip: any;
  opened: boolean;
}): JSX.Element => {
  console.log("open", opened);
  useEffect(() => {
    console.log(opened, "open");
  }, [opened]);
  return (
    <div className="h-full w-full hover:border-0">
      <div className="flex w-full">
        <div className="group relative flex w-full hover:border-0">
          <div className="flex w-full items-center justify-center rounded bg-transparent text-base font-semibold text-white hover:border-0 hover:border-transparent hover:bg-transparent">
            {text}
          </div>
          <div
            className={classNames(
              opened
                ? "opacity-0 group-hover:opacity-0"
                : "group-hover:opacity-100 group-hover:delay-200",
              "absolute top-[10%] left-full z-20 hidden translate-x-[15%] whitespace-nowrap  rounded bg-black py-[0.53rem] px-[0.55rem] text-[0.75rem] font-semibold text-white opacity-0 hover:border-0 group-hover:flex "
            )}
          >
            <div className="absolute top-[40%] left-0 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-black hover:border-0"></div>
            {tip}
          </div>
        </div>
      </div>
    </div>
  );
};

export default TooltipRight;