import React from "react";
import { useNavigate } from "react-router-dom";
import style from './NavLayout.module.css'
interface NavProps {
    privilegeList : string[] | undefined
}


// @ts-ignore
const NavLayout: React.FC<NavProps> = ({privilegeList}) => {
    const navigate = useNavigate();
    return (
        <>
            <div className={`${style.topRow} top-row ps-3 navbar navbar-dark` } onClick={()  => navigate("/")}>
                <div className="container-fluid">
                    <span className="navbar-brand">OpenWarehouse</span>
                </div>
            </div>

            <input type="checkbox" title="Navigation menu" className={`${style.navbarToggler}`} />

            <div className={style.navScrollable}>
                <nav className="flex-column">
                    <div className={`${style.navItem} px-3`}>
                        <button
                            className={`${style.navLink} nav-link active`}
                            onClick={() => navigate('/')}
                        >
                            <span
                                className={`${style.bi} ${style.biHouseDoorFillNavMenu}`}
                                aria-hidden="true"
                            ></span>{' '}
                            Home
                        </button>
                    </div>
                    <div className={`${style.navItem} px-3`}>
                        <button
                            className={`${style.navLink} nav-link active`}
                            onClick={() => navigate('/accounts')}
                        >
                            <span
                                className={`${style.bi} ${style.biPlusSquareFillNavMenu}`}
                                aria-hidden="true"
                            ></span>{' '}
                            Accounts
                        </button>
                    </div>
                    <div className={`${style.navItem} px-3`}>
                        <button
                            className={`${style.navLink} nav-link active`}
                            onClick={() => navigate('/weather')}
                        >
                            <span
                                className={`${style.bi} ${style.biListNestedNavMenu}`}
                                aria-hidden="true"
                            ></span>{' '}
                            Weather
                        </button>
                    </div>
                    <div className={`${style.navItem} px-3`}>
                        <button
                            className={`${style.navLink} nav-link active`}
                            onClick={() => navigate('/auth')}
                        >
                            <span
                                className={`${style.bi} ${style.biLockNavMenu}`}
                                aria-hidden="true"
                            ></span>{' '}
                            Auth Required
                        </button>
                    </div>
                </nav>
            </div>
        </>
    );
};

export default NavLayout;
