import React, { useState } from 'react';
// import { sidebarContext } from "../helpers/SidebarProvider";
import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';


interface Props {
    children: React.ReactNode;
}

const Sidebar: React.FC<Props> = ({ children }) => {

    const [show, setShow] = useState<boolean>(false);

    const toggle = () => {
        setShow(!show);
    };

    return (
        <div className="sidebar-wrapper">
            <nav className={show ? '' : 'no-sidebar'} id="sidebar">
                <div className={`menu-items`}>{children}</div>
            </nav>
            <div className="toggle-btn" onClick={toggle}>
                <div className='toggle-btn-wrapper'>
                    <span>MENU</span> {show ?
                        <AiOutlineClose style={{ color: 'white', paddingBottom: "3px", scale: "1.3" }} /> :
                        <AiOutlinePlus style={{ color: 'white', paddingBottom: "3px", scale: "1.3" }} />}
                </div>
            </div>
        </div>
    );
};

export default Sidebar;