"use client";

import React, { useEffect, useState } from "react";
import { User } from "@/types/types";
import Container from "@/components/elements/Container";
import ModelHead from "@/components/models/ModelPage/ModelHead";
import useAxios from "@/hooks/useAxios";
import ProfileContent from "@/components/settings/profile/ProfileContent";

function ProfileInfo() {
  const [user, setUser] = useState<User>();

  const { request } = useAxios();
  const fetchStates = async () => {
    const response = await request<{ user: User }>("GET", `/profile`);
    setUser(response?.user);
  };
  useEffect(() => {
    fetchStates();
  }, []);

  return (
    <Container>
      <ModelHead
        item2={{
          postsCount: user?.postsCount ?? 0,
          allProjectsCount: user?.allProjectsCount ?? 0,
          successfulProjectsCount: user?.successfulProjectsCount ?? 0,
        }}
        user={user ?? ({} as User)}
      />

      <ProfileContent user={user} />
    </Container>
  );
}

export default ProfileInfo;
