text: import React from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import { logout } from '../store';
  
  const Navbar = ({ handleClick, isLoggedIn }) => (
    <div>
      <h1>Kincare Presented by For Us Esthetics</h1>
      <nav>
        {isLoggedIn ? (
          <div>
            {/* The navbar will show these links after you log in */}
            <Link to="/home">Home</Link>
            <Link to="/products">Shop</Link>
            <Link to="/cart">Cart</Link>
            <a href="#" onClick={handleClick}>
              Logout
            </a>
          </div>
        ) : (
          <div>
            {/* The navbar will show these links before you log in */}
            <Link to="/products">Shop</Link>
            <Link to="/login">Login</Link>
            <Link to="/signup">Sign Up</Link>
            <Link to="/cart">Cart</Link>
          </div>
        )}
      </nav>
      <hr />
    </div>
  );
  
  /**
   * CONTAINER
   */
  const mapState = (state) => {
    return {
      isLoggedIn: !!state.auth.id,
    };
  };
  
  const mapDispatch = (dispatch) => {
    return {
      handleClick() {
        dispatch(logout());
      },
    };
  };
  
  export default connect(mapState, mapDispatch)(Navbar);
  