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

const Cabinet = ({onLogOut}) => {
  return (
    <>
      <Link to="/">
          <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
              <span>&larr;</span>   Back to Main Page
          </button>
      </Link>
      <br/>
      <br/>
      <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" className="btn btn-warning btn-sm">My Projects</button>
            </a>
            <div style={{marginTop:"5px"}}>
              <a href="/">
                <button className="btn btn-warning btn-sm">Main Page</button>
              </a>
            </div>
            <div style={{marginTop:"5px"}}>
                <Link to= "/changePass">
                  <button className="btn btn-warning btn-sm">Change pass</button>
                </Link>
            </div>
            <button onClick={() => onLogOut()} className="btn btn-warning btn-sm" style={{marginTop:"5px"}}>Log out</button>
          </div>
        </div>
      </div>
    </>
  );
};

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

export default ConnectCabinet;
