// src/components/App/App.jsx
import React from "react";
import { Outlet, Link } from "react-router-dom";
import Navigation from "../Navigation/Navigation";
import "./App.css";

// Step 7: 
// - Import useSelector and useDispatch from "react-redux".
// - Import the login and loader actions from the authSlice.
// - Import AppLoader to display while loading.

function App() {
  // Step 7:
  // - Initialize the dispatch function using useDispatch.
  // - Retrieve the "loaded" state from the auth slice using useSelector.

  // Step 8: 
  // - Use useEffect to simulate loading user data.
  //   - Check if the "loaded" state is false.
  //   - If false, use setTimeout to simulate fetching data after 2 seconds.
  //   - Dispatch the login action to simulate a user login.
  //   - Dispatch the loader action to update the "loaded" state to true.
  //   - Include dispatch and loaded as dependencies in the useEffect hook.

  // Step 9:
  // - Before rendering the main UI, check if the "loaded" state is false.
  //   - If false, return the AppLoader component to show a loading indicator.
  //   - If true, render the application's main UI.

  return (
    <div className="App">
      <header>
        <Link to="/" style={{ textDecoration: "none", color: "inherit" }}>
          <h1>Ravenous</h1>
        </Link>
        <Navigation />
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default App;