import Header from "../components/Header";
const InvitePage = () => {
  function GoInvitedroom() {
    // if() : //초대받은 사람이 로그인 o
    // roomid = //서버에서 받아온 방 번호 저장
    // //초대받은 사람의 참여한  방 목록에 roomid 추가
    // else //로그인x
    // //로그인 하게 보냄.
  }

  function Invitereject() {
    // if () //초대받은 사람이 로그인 o
    //   <Link to="/user/:id"></Link>//유저 페이지로 이동.
    // else //로그인x
    //   <Link to="/"></Link> //메인화면으로 이동.
  }

  return (
    <div>
      {/*페이지 전체*/}
      <Header />
      <div className="d-flex justify-content-evenly">
        {/* 위 사진,이름 */}
        <div
          style={{
            width: "100%",
            height: "140px",
            textAlign: "center",
            border: "3px",
            borderStyle: "none solid solid",
            borderColor: "red",
            fontSize: "12px",
          }}
        >
          {/* 방 부분 */}
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
          <img style={{ width: "90px", height: "90px" }}></img>
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
            방 id: {/*${roomid}*/}
          </p>
        </div>

        {/* <div
          style={{
            width: "207px",
            height: "140px",
            textAlign: "center",
            border: "3px",
            borderStyle: "none solid solid none",
            borderColor: "red",
            fontSize: "12px",
          }}
        >
          초대한 사람 부분 
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대한 사람</p>
          <img src={UserImage} style={{ width: "90px", height: "90px" }}></img>
          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
            이름: {/*${nickname} 
          </p>
        </div>*/}
      </div>

      <div
        style={{
          width: "80%",
          height: "200px",
          textAlign: "center",
          fontSize: "18px",
          marginLeft: "10%",
          marginRight: "10%",
        }}
      >
        {/* 아래 텍스트 */}
        <p>
          <br></br>
          축하합니다! 친구{/*${InvitePerson.nickname}*/}가 화상회의방{" "}
          {/*${InvitedRoo.roomid}*/}로 초대하였습니다.
          <br></br>
          <br></br>
          초대를 수락하시겠습니까?
        </p>
      </div>

      <div className="d-flex justify-content-evenly">
        {/* 수락, 거절 버튼 */}
        <button
          type="submit"
          className="col-2 p-1 btn btn-primary"
          data-bs-dismiss="modal"
          style={{ width: "120px" }}
          onClick={GoInvitedroom}
        >
          수락
        </button>
        <button
          type="submit"
          className="col-2 p-1 btn btn-primary"
          data-bs-dismiss="modal"
          style={{ width: "120px" }}
          onClick={Invitereject}
        >
          거절
        </button>
      </div>
    </div>
  );
};

export default InvitePage;