import React, { useState } from 'react'
import './home.scss'
import Alert from './public/alert-view/alert-view.jsx'
import Device from './device/device.jsx'
import ScreenShot from './screenshot/screenshot.jsx'
import AiChat from './ai-chat/ai-chat.jsx'
import Process from './process/process.jsx'
import { createHandleClose } from './home.js'

function Home() {
  const [showAlert, setShowAlert] = useState(false)
  const [showDevice, setShowDevice] = useState(true)
  const [showScreenShot, setShowScreenShot] = useState(true)
  const [showAiChat, setShowAiChat] = useState(true)
  const [showProcess, setShowProcess] = useState(true)
  
  return (
    <div className="home-container">
      <div className="home-bg">
        {showDevice && <Device show={showDevice}/>}
        {showScreenShot && <ScreenShot show={showScreenShot}/>}
        {showAiChat && <AiChat show={showAiChat}/>}
        {showProcess && <Process show={showProcess}/>}
      </div>
     
      {showAlert && <Alert show={showAlert} onClose={createHandleClose(setShowAlert)} />}
    </div>
  )
}

export default Home
