import { useState } from "react";
import robotLogo from "../../../assets/images/robot-coin1.png";
import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md";
import {
  VscArrowCircleUp,
  VscArrowUp,
  VscFoldUp,
  VscGroupByRefType,
  VscThumbsup,
  VscTriangleUp,
  VscVariableGroup,
} from "react-icons/vsc";
const BackToTopButton = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    if (window.pageYOffset > 100) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  window.addEventListener("scroll", toggleVisibility);

  return (
    <div
      className={`bg-orange-500 back-to-top hover:scale-[1.1] transition-all duration-1000 ease-in-out right-0 md:right-[20px] bottom-[10px] md:bottom-[20px] w-[40px] h-[40px] sm:w-[60px] sm:h-[60px] ${
        isVisible ? "visible" : ""
      } group relative m-12 flex justify-center z-[1000]`}
      onClick={scrollToTop}
    >
      <VscArrowCircleUp
        className="absolute top-[50%] right-[50%] text-orange-500 translate-y-[-50%]  translate-x-[50%] opacity-70 w-8 h-8   transition-all text-center"
        width={100}
      ></VscArrowCircleUp>
      <img src={robotLogo} className="rounded-full" alt="back" />
      {/* <span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center">
        👆
      </span> */}
    </div>
  );
};

export default BackToTopButton;
