"use client";
import { getUser } from "muzak/data/fetch";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    async function getUsers() {
      const user = getUser();
      const access_token = user?.access_token;
      const headers = new Headers();
      headers.set("Authorization", `Bearer ${access_token}`);
      headers.set("Content-Type", "application/json; charset=utf-8");
      const users = await fetch("http://127.0.0.1:8001/api/user/", { headers });
      const userData = await users.json();
      setUserData(userData);
    }
    getUsers();
  }, []);

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