/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable jsx-a11y/interactive-supports-focus */

"use client";

import type { ComponentProps } from "react";
import { useEffect, useState } from "react";

import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { cn } from "@/libs/utils";

function ScrollToTop(props: ComponentProps<"div">) {
  const [showButton, setShowButton] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop;
      setShowButton(scrollTop > 100);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  return (
    <div
      {...props}
      className={cn(
        `fixed bottom-4 right-3 z-[100] transition md:bottom-12 md:right-2`,
        props.className,
        !showButton && "hidden",
      )}
    >
      <div
        role="button"
        className="flex size-10 items-center justify-center rounded-primary border border-primary-500 bg-white"
        onClick={() => {
          window.scrollTo({ top: 0, behavior: "smooth" });
        }}
      >
        <LIcon name="ChevronsUp" className="text-primary-500" />
      </div>
    </div>
  );
}
export default ScrollToTop;