import { Link } from 'react-router-dom'
import { handleLogout } from '../context/auth'

const Header = () => {
  const id = sessionStorage.getItem('user');
  return (
    <div>
      <form
        style={{ backgroundColor: '#FCF4FF' }}
        className="flex-column align-items-center justify-content-center p-2"
      >
        <div className="d-flex justify-content-end">
          <div>
            <Link to={`/user/${id}`}>
              <img src="/BORA.png" style={{ width: '160px' }} />
            </Link>
          </div>
          <button
            type="button"
            className=" mt-3 ms-5 rounded"
            data-bs-toggle="modal"
            data-bs-target="#logout"
            style={{
              height: '30px',
              backgroundColor: '#E0CEE8',
              color: 'black',
              border: '1px #E0CEE8',
            }}
          >
            로그아웃
          </button>
          <div
            className="modal fade"
            id="logout"
            tabIndex="-1"
            aria-labelledby="logoutLabel"
            aria-hidden="true"
          >
            <div className="modal-dialog">
              <div className="modal-content">
                <div className="modal-header">
                  <button
                    type="button"
                    className="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div className="modal-body d-flex justify-content-center">
                  로그아웃 하시겠습니까?
                </div>
                <div className="row mb-3">
                  <div className="d-flex justify-content-evenly">
                    <Link to="/" className="col-2 p-1 btn btn-primary">
                      <button
                        type="submit"
                        className="btn btn-primary"
                        onClick={() => handleLogout()}
                        data-bs-dismiss="modal"
                      >
                        예
                      </button>
                    </Link>
                    <button
                      type="submit"
                      className="col-2 p-1 btn btn-primary"
                      data-bs-dismiss="modal"
                    >
                      아니요
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div
        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
      ></div>
    </div>
  )
}

export default Header