import "./styles.sass";
import Button from "@/common/components/Button";
import SheepstarSitting from "@/assets/SheepstarSitting.png";
import {Link, NavLink} from "react-router-dom";
import {useEffect, useState} from "react";

const links = [
    {name: "Home", to: "/"},
    {name: "Features", to: "/features"},
    {name: "Coins", to: "/coins"},
    {name: "Status", to: "/status"},
    {name: "More", to: "/more"},
];

const Navigation = () => {
    const [hide, setHidden] = useState(false);
    const [lastScrollY, setLastScrollY] = useState(0);

    const scrollHandler = () => {
        setHidden(window.scrollY > lastScrollY);
        setLastScrollY(window.scrollY);
    }

    useEffect(() => {
        window.addEventListener('scroll', scrollHandler);

        return () => window.removeEventListener('scroll', scrollHandler);
    }, [lastScrollY]);

    return (
        <header className={`header${hide ? ' hidden' : ''}`}>
            <div className="link-area">
                <Link to={"/"}><img className="logo" src={SheepstarSitting} alt="Sheepstar Logo"/></Link>

                <ul className="links">
                    {links.map((item) => (
                        <li key={item.to}><NavLink to={item.to}
                                                   className={({isActive}) => (isActive ? "active" : "inactive")}>{item.name}</NavLink>
                        </li>))}
                </ul>
            </div>
            <div className="dashboard-area">
                <Button text="Dashboard" to="https://dash.sheepstar.xyz/"/>
            </div>
        </header>
    );
}

export default Navigation;