const { useState, useEffect } = React;
const { useLocation } = ReactRouterDOM;

function Header() {
    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
    const location = useLocation();

    useEffect(() => {
        document.documentElement.setAttribute('data-bs-theme', theme);
        localStorage.setItem('theme', theme);
    }, [theme]);

    const toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    };

    const isHooksPage = location.pathname === '/hooks';

    return (
         <nav
            className={`
                my-bottom-border navbar navbar-expand-lg shadow-sm
                ${theme === 'dark' ? 'bg-dark navbar-dark' : 'bg-white navbar-light'}
                ${isHooksPage ? 'sticky-top' : ''}  
            `}
            style={{ transition: 'background-color 0.3s ease' }}
        >
            <div className="container">
                <ReactRouterDOM.Link className="navbar-brand d-flex align-items-center" to="/">
                    <img src="logo2.png" alt="محول الترميز" className="logo ms-2" />
                   <span className="fw-bold text-primary fs-5"> محول الترميز</span>
                   <span className="fw-bold text-secondary fs-6 me-2">V1.0</span>
                </ReactRouterDOM.Link>
                
                <div className="d-flex align-items-center order-lg-last">
                    <button onClick={toggleTheme} className="btn btn-link text-decoration-none p-2" title={theme === 'dark' ? 'تفعيل الوضع الفاتح' : 'تفعيل الوضع الليلي'}>
                        {theme === 'dark' ? <i className="fa fa-sun-o fs-5 text-warning"></i> : <i className="fa fa-moon-o fs-5 text-secondary"></i>}
                    </button>
                    
                    <button className="navbar-toggler border-0 shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                </div>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                            <ReactRouterDOM.Link className="nav-link active fw-medium px-3" aria-current="page" to="/hooks">جميع الهاكات</ReactRouterDOM.Link>
                        </li>
                        <li className="nav-item">
                            <a href="https://shqawe.net" className="nav-link active fw-medium px-3">
                                موقع شقاوي
                            </a>
                        </li>
                        <li className="nav-item">
                            <a href="https://shqawe.net/xf" className="nav-link active fw-medium px-3">
                                المنتدى
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}