import { useEffect, useState } from "react";

import UnderConstruction from "@/components/static_pages/UnderConstruction";
import RoundedContainer from "@/components/ui/RoundedContainer";
import { getServices } from "@/lib/api/helpers/services";
import { Project, Service, User } from "@/lib/api/types";
import { getUsers } from "@/lib/api/helpers/users";

export default function Overview() {
  const [projectStatus, setProjectStatus] = useState<boolean>(true);
  const [projects, setProjects] = useState<Project[]>();
  /*useEffect(() => {
    getProjects()
      .then((projects) => {
        if (projects.length > 0) {
          setProjects(projects);
        }
      })
      .catch(() => {
        setProjectStatus(false);
      });
  }, []); IMPLEMENT GET PROJECTS */
  const [serviceStatus, setServiceStatus] = useState<boolean>(true);
  const [services, setServices] = useState<Service[]>();
  useEffect(() => {
    getServices()
      .then((services) => {
        if (services.length > 0) {
          setServices(services);
        }
      })
      .catch(() => {
        setServiceStatus(false);
      });
  }, []);
  const [userStatus, setUserStatus] = useState<boolean>(true);
  const [users, setUsers] = useState<User[]>();
  useEffect(() => {
    getUsers()
      .then((users) => {
        if (users.length > 0) {
          setUsers(users);
        }
      })
      .catch(() => {
        setUserStatus(false);
      });
  }, []);
  return (
    <div>
      <RoundedContainer>
        <p>Users</p>
      </RoundedContainer>
      <RoundedContainer>
        <p>Services</p>
      </RoundedContainer>
      <RoundedContainer>
        <p>Projects</p>
      </RoundedContainer>
    </div>
  );
}