// import { useState } from "react";
// import JitsiMeeting from "../components/JitsiMeeting";

// const JoinRoom = () => {
//   const [room, setRoom] = useState("");
//   const [name, setName] = useState("");
//   const [joined, setJoined] = useState(false);

//   const handleJoin = () => {
//     if (room && name) setJoined(true);
//   };

//   return joined ? (
//     <JitsiMeeting roomName={room} displayName={name} />
//   ) : (
//     <div style={{ padding: 40 }}>
//       <h2>Join a Meeting Room</h2>
//       <input
//         type="text"
//         placeholder="Room Name"
//         value={room}
//         onChange={(e) => setRoom(e.target.value)}
//       />
//       <br />
//       <input
//         type="text"
//         placeholder="Your Name"
//         value={name}
//         onChange={(e) => setName(e.target.value)}
//       />
//       <br />
//       <button onClick={handleJoin}>Join</button>
//     </div>
//   );
// };

// export default JoinRoom;
// import { useState } from "react";
// import JitsiMeeting from "../components/JitsiMeeting";

// const JoinRoom = () => {
//   const [room, setRoom] = useState("");
//   const [name, setName] = useState("");
//   const [joined, setJoined] = useState(false);

//   const handleJoin = () => {
//     if (room && name) setJoined(true);
//   };

//   return joined ? (
//     <JitsiMeeting roomName={room} displayName={name} />
//   ) : (
//     <div style={{ padding: 40 }}>
//       <h2>Join a Meeting Room</h2>
//       <input
//         type="text"
//         placeholder="Room Name"
//         value={room}
//         onChange={(e) => setRoom(e.target.value)}
//       />
//       <br />
//       <input
//         type="text"
//         placeholder="Your Name"
//         value={name}
//         onChange={(e) => setName(e.target.value)}
//       />
//       <br />
//       <button onClick={handleJoin}>Join</button>
//     </div>
//   );
// };

// export default JoinRoom;

import { Outlet, Link } from "react-router-dom";
import "./JoinRoom.css";

const JoinRoom = () => {
  return (
    <div className="app-container">
      <aside className="sidebar">
        <h2>Meeting Controls</h2>
        <ul>
          <li>
            <Link to="/create">Create Meeting</Link>
          </li>
        </ul>
      </aside>
      <main className="main-content">
        <Outlet />
      </main>
    </div>
  );
};

export default JoinRoom;
