import { ArrowUpIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
import React, { useState } from "react";
/**
 * Represents the ScrollArrow component.
 * @interface
 */
const ScrollArrow = () => {
  /**
   * State to manage whether to show the scroll arrow.
   * @type {boolean}
   * @default false
   * @name showScroll
   * @memberOf ScrollArrow
   */
  const [showScroll, setShowScroll] = useState(false);
  /**
   * Checks the scroll position and updates `showScroll` state.
   * @function
   * @name checkScrollTop
   * @memberOf ScrollArrow
   */
  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 400) {
      setShowScroll(false);
    }
  };
  /**
   * Scrolls to the top of the page smoothly when clicked.
   * @function
   * @name scrollTop
   * @memberOf ScrollArrow
   */
  const scrollTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  window.addEventListener("scroll", checkScrollTop);

  return (
    <div
      className="scrollTop "
      onClick={scrollTop}
      style={{ height: 40, right: 80, display: showScroll ? "flex" : "none" }}
    >
      <ArrowUpIcon className="w-7" />
    </div>
  );
};

export default ScrollArrow;