import React, { useState, useEffect } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import LoginForm from './components/LoginForm';
import RegisterForm from './components/RegisterForm';
import Alert from './components/Alert';

const App = () => {
  const [logged, setLogged] = useState(false);
  const [showLoginForm, setShowLoginForm] = useState(false);
  const [showRegisterForm, setShowRegisterForm] = useState(false);

  const [showAlert, setShowAlert] = useState(false);
  const [alertType, setAlertType] = useState(0);
  const [alertMessage, setAlertMessage] = useState("");

  useEffect(() => {

  }, []);

  return (
    <div className="App">
      <Alert showAlert={showAlert} alertType={alertType} alertMessage={alertMessage} setShowAlert={setShowAlert} setAlertType={setAlertType} setAlertMessage={setAlertMessage} />
      <Header logged={logged} setLogged={setLogged} setShowLoginForm={setShowLoginForm} setShowRegisterForm={setShowRegisterForm} />
      <main className="main container-fluid main-background">
        <LoginForm showLoginForm={showLoginForm} setShowLoginForm={setShowLoginForm} setLogged={setLogged} setShowRegisterForm={setShowRegisterForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} />
        <RegisterForm showRegisterForm={showRegisterForm} setShowRegisterForm={setShowRegisterForm} setShowLoginForm={setShowLoginForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} />
      </main>
      <Footer />
    </div>
  );
}

export default App;
