import React from 'react';
import './style.sass';
import {MainContext} from '../../context'

const mobileBar  = React.createContext(null)
   const Center = (props) => {

    const toggleView = () => {
      if(mobileBar?.current?.className?.match('change'))
        mobileBar?.current?.classList?.remove('change')
      else
        mobileBar?.current?.classList?.add('change')
    }
     return (
       <MainContext.Consumer>{data => {
        return(
          <nav className={`wizrd-site-navigation wizrd-site-navigation-center ${data?.headerLinks?.length > 4 && 'wizrd-site-navigation-extra'}`}>

          <ul>
            {
            data?.headerLinks?.map((headerLink) => {
              return(<li>
                {headerLink}
              </li>)
            })
            }

          </ul>
        </nav>
        )
         }}
       </MainContext.Consumer>

     );
   };

export default Center;