import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import roomApi from "../../apis/room.api";
import userApi from "../../apis/user.api";

const RoomSingle = () => {
  const [roomNum, setRoomNum] = useState("");
  const [room, setRoom] = useState([]);
  const roomId = localStorage.getItem("user");
  const channelId = 1;
  const A = [];

  // async function getJoinRoom(Id) {
  //   try {
  //     console.log('id:',id)
  //     const User = await userApi.getUser({id: Id})
  //     console.log('User1:',User)
  //     console.log('User2:',User.roomNumber)
  //     const RoomNumArr = User.roomNumber
  //     console.log('setRoomNum:',RoomNumArr)
  //     const Room = await roomApi.getRoom(RoomNumArr)
  //   } catch (error) {
  //     // catchErrors(error, setError)
  //   }
  // }

  // useEffect(() => {
  //   getJoinRoom(id)
  // }, [id])

  return (
    <Link
      to={`/room/${roomId}/${channelId}`}
      className="text-decoration-none text-dark"
    >
      <div
        className="d-flex mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div style={{ width: "37px", height: "37px" }}>
          <img
            alt="roomImg"
            src="BORA.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div
          className="mx-3 mt-2"
          style={{
            width: "250px",
            overflow: "scroll",
            whiteSpace: "nowrap",
            msOverflowStyle: "none",
          }}
        >
          데계 재미있는 수학과 데계데계데계 재미있는 수학과
        </div>
        <div className="ms-auto mt-2"> 15/34 </div>
      </div>
    </Link>
  );
};

export default RoomSingle;