"use client";
import { useEffect, useState } from "react";
import { api, User } from "muzak/data/fetcher";

export default function Page() {
  const [userData, setUserData] = useState<User[]>([]);

  useEffect(() => {
    async function getUsers() {
      const { data: users } = await api.users.list({});
      setUserData(Array.isArray(users) ? users : [users]);
    }
    getUsers();
  }, []);

  return (
    <div className="flex min-h-screen flex-col items-center justify-around">
      {userData.length > 0 ? (
        userData.map((user: User) => <div key={user.id}>{user.email}</div>)
      ) : (
        <div>Loading users...</div>
      )}
    </div>
  );
}
