"use client";

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

export default function ProfileClient() {
  const [user, setUser] = useState<User | null>(null);
  const { request, loading } = useAxios();

  const fetchUser = async () => {
    try {
      const response = await request<{ user: User }>("GET", "/profile");
      setUser(response?.user ?? null);
    } catch (err) {
      console.error("خطا در دریافت اطلاعات کاربر:", err);
    }
  };

  useEffect(() => {
    fetchUser();
  }, []);

  if (loading || !user) {
    return (
      <div className="flex h-screen items-center justify-center" />
    );
  }

  return (
    <Container>
      <ModelHead
        item2={{
          postsCount: user.postsCount ?? 0,
          followersCount: user.followersCount ?? 0,
          followingCount: user.followingCount ?? 0,
        }}
        user={user}
      />
      <ModelContent user={user} searchParams={{}} />
    </Container>
  );
}
