import { Link, useLocation } from "react-router-dom";

export default function FloatingHeader() {
    const location = useLocation();

    return (
        <header className="floating-header">
            <nav className="header-nav">
                <Link
                    to="/"
                    className={`nav-link ${location.pathname === "/" ? "active" : ""}`}
                >
                    Home
                </Link>
                <Link
                    to="/work-experience"
                    className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
                >
                    Work Experience
                </Link>
                <Link
                    to="/skills"
                    className={`nav-link ${location.pathname === "/skills" ? "active" : ""}`}
                >
                    Skills
                </Link>
                <Link
                    to="/about"
                    className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
                >
                    About Me
                </Link>
                <Link
                    to="/projects"
                    className={`nav-link ${location.pathname === "/projects" ? "active" : ""}`}
                >
                    Projects and Sidequests
                </Link>
                <Link
                    to="/contact"
                    className={`nav-link ${location.pathname === "/contact" ? "active" : ""}`}
                >
                    Contact
                </Link>
            </nav>
        </header>
    );
}