import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import "../styles/components/header.css";

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

    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };

    // Close menu when route changes
    useEffect(() => {
        setIsMenuOpen(false);
    }, [location]);

    const ROUTE_TITLES: { [key: string]: string } = {
        "/": "Sasha Bayda",
        "/skills": "Skills",
        "/work-experience": "Work Experience",
        "/projects": "Projects",
        "/about": "About Me"
    };

    const currentTitle = ROUTE_TITLES[location.pathname] || "Sasha Bayda";

    return (
        <header className="floating-header">
            <div className="header-content">
                <div className="mobile-page-title">
                    {currentTitle}
                </div>

                <button
                    className={`mobile-toggle ${isMenuOpen ? "open" : ""}`}
                    onClick={toggleMenu}
                    aria-label="Toggle navigation"
                >
                    <span className="hamburger-line"></span>
                    <span className="hamburger-line"></span>
                    <span className="hamburger-line"></span>
                </button>

                <nav className={`header-nav ${isMenuOpen ? "is-open" : ""}`}>
                    <Link
                        to="/"
                        className={`nav-link ${location.pathname === "/" ? "active" : ""}`}
                    >
                        Home
                    </Link>
                    <Link
                        to="/skills"
                        className={`nav-link ${location.pathname === "/skills" ? "active" : ""}`}
                    >
                        Skills
                    </Link>
                    <Link
                        to="/work-experience"
                        className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
                    >
                        Work Experience
                    </Link>
                    <Link
                        to="/projects"
                        className={`nav-link ${location.pathname === "/projects" ? "active" : ""}`}
                    >
                        Projects and Sidequests
                    </Link>
                    <Link
                        to="/about"
                        className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
                    >
                        Personal About Me
                    </Link>
                </nav>
            </div>
        </header>
    );
}

