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

function Home() {
  const { showDevices, 
    setShowDevices, 
    showScreenShot, 
    setShowScreenShot,
    showSetting,
    setShowSetting,
  } = HomeLogic();

  return (
    <div className="Home-container">
      <div className="devices-container">
        {showDevices && <Devices />}
      </div>
      <div className="screenshot-container">
        {showScreenShot && <ScreenShot />}
      </div>
      <div className="setting-container">
        {showSetting && <Setting />}
      </div>
    </div>
  );
}

export default Home;
