import './Home.css';
import { HomeLogic } from './Home.js';
import Devices from './Devices/Devices.jsx';
import ScreenShot from './ScreenShot/ScreenShot.jsx';
import Chat from './Chat/Chat.jsx';

function Home() {
  const { showDevices, 
    setShowDevices, 
    showScreenShot, 
    setShowScreenShot,
    showChat,
    setShowChat,
  } = HomeLogic();

  return (
    <div className="Home-container">
      <div className="devices-container">
        {showDevices && <Devices />}
      </div>
      <div className="screenshot-container">
        {showScreenShot && <ScreenShot />}
      </div>
      <div className="chat-container">
        {showChat && <Chat />}
      </div>
    </div>
  );
}

export default Home;
