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

const Cabinet = ({onLogOut}) => {
  return (
    <>
      <Link to="/">
          <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
              <span>&#8617;</span> Back to Main Page
          </button>
      </Link>
      <br/>
      <br/>
      <div className="container" >
        <div className="card">
          <div className="upper">
            <div className="user text-center">
              <div className="profile mt-3">
                <ConUpload  />{" "}
              </div>
            </div>
          </div>

          <div className="user text-center">
            <h4><CNickName /></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-success btn-sm">Main Page</button>
              </a>
            </div>
            <div style={{marginTop:"5px"}}>
                <Link to= "/changePass">
                  <button className="btn btn-info btn-sm">Change pass</button>
                </Link>
            </div>
            <button onClick={() => onLogOut()} className="btn btn-danger btn-sm" style={{marginTop:"5px"}}>Log out</button>
          </div>
        </div>
      </div>
    </>
  );
};

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

export default ConnectCabinet;
