"use client";

import React, { useEffect } from "react";
import Sidebar from "@/components/App/Shared/Sidebar";
import { useUserStore } from "@/state/useUserStore";
import { toast } from "sonner";
import { UserDataAndStatus } from "@/types/custom/user";

const AppLayout = ({ children }: { children: React.ReactNode }) => {
  const { setUser, user } = useUserStore();

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const res = await fetch("/api/users/get-current-user");
        const { data }: { data: UserDataAndStatus } = await res.json();

        if (data?.status === "success") {
          console.log(data.user_data);
          setUser(data.user_data);
        }

        if (data?.status === "failed") {
          toast.error("Something went wrong");
        }
      } catch (error: any) {
        console.error("Error fetching user data", error);
        toast.error("Error fetching user data");
      }
    };

    if (!user) {
      fetchUserData();
    }
  }, [user]);

  return (
    <div className="min-h-screen">
      <div className="flex justify-center w-full min-h-screen">
        <div className="relative w-full container mx-auto flex">
          <header className="flex-none w-[275px] h-screen sticky inset-y-0 overflow-y-auto">
            <Sidebar />
          </header>
          <main className="flex max-w-[1050px] justify-start mr-auto">
            {children}
          </main>
        </div>
      </div>
    </div>
  );
};

export default AppLayout;