import React from "react";
import { connect } from "react-redux";
import ConnectNickName from "../components/nick";
import ImgProfile from "../components/profile";
import { actionAuthLogout } from "../actions/actionAuthLogout";

const Cabinet = ({onLogOut}) => {
  return (
    <>
      <div className="container" >
        <div className="card">
          <div className="upper">
            <ImgProfile px={"300px"} />{" "}
          </div>
          <div>
            <div>
              {" "}
            </div>
          </div>
          <div>
            <h4>
              <ConnectNickName />
            </h4>
            <a href="/projects">
              <button type="button">
                My Projects
              </button>
            </a>
            <div>
              <a href="/">
                <button>
                  Main Page
                </button>
              </a>
            </div>
            <button onClick={() => onLogOut()}>Log out</button>
          </div>
        </div>
      </div>
    </>
  );
};

const ConnectCabinet = connect(null, {onLogOut: actionAuthLogout})(Cabinet);

export default ConnectCabinet;
