"use client";

import { FC, ReactNode, useEffect, useState } from "react";
import { ChevronUp } from 'lucide-react'

export const ScrollTopButton: FC = (): ReactNode => {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            setVisible(window.scrollY > 300);
        };

        handleScroll();

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    if (!visible) return null;

    return <button
        onClick={() =>
            window.scrollTo({
                top: 0,
                behavior: "smooth",
            })
        }
        className="fixed right-6 bottom-6 bg-amber-600 hover:bg-gray-400 text-white rounded-full w-10 h-10 flex items-center justify-center shadow transition-all ease-in duration-150"
        aria-label="Scroll to top"
    >
        <ChevronUp />
    </button>;
}