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

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

const Navigation = () => {
    return (
        <header className="header">
            <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;