import { useState } from 'react'

const Home = () => {

    const [text, setText] = useState("")
    const [error, setError] = useState("")

    const handleOnClick = (e) => {
        e.preventDefault()
        setText("Hello from ReactJS!")
        setError("")
        setTimeout(() => {
            setText("")
            setError("")
        }, 5000)
    }

    return (
        <div className='main-container'>
            <h3>Click the button below to get a <span className='random'>Hello</span></h3>
            <button onClick={handleOnClick}>Click Me!</button>
            { text && <div className="display-container"><h2><q className='quote'>{text}</q><p className='author'> - Agnes</p></h2></div>}
            { error && <div className="display-container"><h2 className='error'>{error}</h2></div>}
        </div>
    )
}

export default Home