import { useEffect, useState } from "react";
import { api } from "../API/API";
import { Project } from "../Types/goTypes";

function UserProjectListAdmin(): JSX.Element {
  const [projects, setProjects] = useState<Project[]>([]);

  useEffect(() => {
    const fetchProjects = async (): Promise<void> => {
      try {
        const token = localStorage.getItem("accessToken") ?? "";
        // const username = props.username;

        const response = await api.getUserProjects(token);
        if (response.success) {
          setProjects(response.data ?? []);
        } else {
          console.error("Failed to fetch projects:", response.message);
        }
      } catch (error) {
        console.error("Error fetching projects:", error);
      }
    };

    void fetchProjects();
  }, []);

  return (
    <div className="border-2 border-black bg-white p-2 rounded-lg text-center">
      <ul>
        {projects.map((project) => (
          <li key={project.id}>
            <span>{project.name}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserProjectListAdmin;
