import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import Grocery from './Grocery';
import {
  HashRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const Toggle = ({action}) => {
  const [b, setB] = useState(true);
  const onclick = () => {
    setB(!b);
    action(b);
  }
  return (
    <div>
      <p>sd</p>
      <button onClick={onclick}>{b ? 'True': 'False'}</button>
    </div>

  );
 
}

const Counter = () => {
  const [c, setC] = useState(1);
  return (
    <button onClick={() => setC(c + 1)}>{c}</button>
  );
}

const App = () => {
  const [d, setD] = useState(1);
  const actionToggle = (v) => {
    setD(v ? d + 1 : d);
  }
  return (
    <Router>
      <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/grocery">Grocery</Link></li>
          <li><Link to="/counter">Counter</Link></li>
        </ul>
      </nav>
      
      <Switch>
        <Route exact path="/"><Toggle action={actionToggle}/></Route>
        <Route exact path="/grocery"><Grocery /></Route>
        <Route exact path="/counter"><Counter /></Route>
      </Switch>
      </div>
    </Router>
  );
}

export default App;
