import { generateUniqueUsers } from "dummy-users-json";

// Define the function
async function fetchUsers() {
  try {
    const users = await generateUniqueUsers(10);
    return users;
  } catch (error) {
    console.error("Error:", error);
    return []; // Optionally return an empty array or handle the error
  }
}

// Call the function and store the returned value in a variable
const fetchedUsers = await fetchUsers();

// Log the fetched users to the console
console.log(fetchedUsers);

import { generateUniqueUsers } from "dummy-users-json";
import { useEffect, useState } from "react";

function App() {
  const [users, setUsers] = useState();

  // Use below for TypeScript,instead of above useState
  /*
  interface User {
    id: number;
    fname: string;
    lname: string;
    email: string;
    job: string;
  }
  const [users, setUsers] = useState<User[] | undefined>();
  */

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const data = await generateUniqueUsers(1);
        setUsers(data);
      } catch (error) {
        console.error("Error fetching user data:", error);
        setUsers([]);
      }
    };

    fetchUsers();
  }, []);

  return (
    <div>
      <ul>
        {users
          ? users?.length > 0
            ? users.map((user) => (
                <li key={user.id}>
                  <h1>
                    {user.fname}&nbsp; {user.lname}
                  </h1>
                  <p>{user.email}</p>
                  <h3 style={{ textTransform: "capitalize" }}>{user.job}</h3>
                </li>
              ))
            : "No Data Available"
          : "Loading..."}
      </ul>
    </div>
  );
}

export default App;