import { connect } from "react-redux";
import ConnectedAvaLogo from "./ava";
import { actionAuthLogout } from "../actions/actionAuthLogout";
import { Redirect } from "react-router";
import { Link } from "react-router-dom";

const NickName = ({nick, onLogOut}) => {
  return (
    <>
      <div className="container">
        <div className="">
           <div style={{width: "100%", paddingBottom: "20px"}}>
                <span style={{color: "black", left:"50px"}}>Your nickname </span>
                <a href="/cabinet" style={{textDecoration: "none", color: "dark"}}>
                    {nick} &nbsp;&nbsp;
                    <ConnectedAvaLogo px={"50px"} mrgn={"10px"} />
                </a>
                <button className="btn btn-danger btn-sm" onClick={() => onLogOut()}>
                    Log out
                </button>
            </div>
            
            <div>
                <Link to = "/search" style={{paddingLeft: "86.5%"}}> 
                    <button className="btn btn-info btn-sm">Search</button> 
                </Link>
            </div>
        </div>  
      </div>
    </>
  );
};

const ConnectedNick = connect(
  (state) => ({ nick: state?.auth?.payload?.sub?.login , logedIn: state.auth.token}),
  { onLogOut: actionAuthLogout }
)(NickName);
export default ConnectedNick;