import './Header.css';
import React from "react"
import { NavLink } from "react-router-dom";
import OnlineToggle from '../components/OnlineToggle';
import Wobler from '../components/Wobler';

export default function Header({ polling, dispatchPolling }) {

  return (
    <div className='Header'>
      <h1 >
        CordaCheckers
      </h1>

      <OnlineToggle
        isOnline={polling.enabled}
        onClick={() => dispatchPolling({ type: "toggleOnOff" })}
      />

      <nav>
        <NavLink to="/about">
          About
        </NavLink>

        <NavLink to="/game">
          <Wobler text="Game" dance={polling.games} />
        </NavLink>

        <NavLink to="/leaderboard">
          <Wobler text="Leaderboard" dance={polling.leaderboard} />
        </NavLink>
      </nav>
    </div>
  )
}