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

const TooltipBottom = ({
  text,
  tip,
  opened,
  special,
}: {
  special?: boolean;
  text: any;
  tip: any;
  opened: boolean;
}): JSX.Element => {
  console.log("open", opened);
  useEffect(() => {
    console.log(opened, "open");
  }, [opened]);
  return (
    <div className="w-full hover:border-0 2xs:w-full ">
      <div className="w-full">
        <div className="group flex w-full hover:border-0">
          <div
            role="button"
            className="relative  flex w-full flex-col 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",
              special ? "-translate-x-[2.75rem]" : "",
              "absolute top-full  z-20 hidden  -translate-x-[0.75rem] whitespace-nowrap  rounded bg-black py-[0.53rem] px-[0.55rem] text-[0.75rem] text-sm font-semibold text-white opacity-0 hover:border-0 group-hover:flex "
            )}
          >
            <div className="absolute left-1/2 -z-10 h-2 w-2 -translate-y-[0.25rem] -translate-x-1/2 rotate-45 rounded-sm bg-black  hover:border-0"></div>
            {tip}
          </div>
        </div>
      </div>
    </div>
  );
};

export default TooltipBottom;