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 id = 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/${id}/${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
            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