import { Link } from "react-router-dom";

const RoomSingle = () => {
  const id = 1;
  const channelId = 1;
  return (
    <Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark">
      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="BORA.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>
      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="BORA_LOGO.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>
      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="cherry.jpg"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>
      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="BORA_LOGO.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>

      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="BORA.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>

      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="cherry.jpg"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>

      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="BORA_LOGO.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>

      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="BORA.png"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>

      <div
        className="row justify-content-start mx-4 my-2 p-2"
        style={{ backgroundColor: "#C4C4C4" }}
      >
        <div className="col-2" style={{ width: "37px", height: "37px" }}>
          <img
            src="cherry.jpg"
            className="rounded-circle"
            style={{ width: "37px", height: "37px" }}
          />
        </div>
        <div className="col-8 m-2"> 데계 재미있는 수학과 </div>
        <div className="col-2 mt-2"> 15/34 </div>
      </div>
    </Link>
  );
};

export default RoomSingle;