"use client";
import React from "react";
import { Layout } from "antd";
import AppHeader from "@/components/header";
import { PuffLoader } from "react-spinners";
import { useMounted } from "@/hooks/useMounted";

const { Content } = Layout;

const LoadingFallback = () => (
  <div className="flex items-center justify-center h-screen z-10">
    <PuffLoader color="#1f73cc" speedMultiplier={3} />
  </div>
);

const AdminLayout: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const mounted = useMounted();

  if (!mounted) {
    return <LoadingFallback />;
  }

  return (
    <>
      {mounted && (
        <Layout className="!min-h-screen flex flex-col">
          <AppHeader />
          <Content>{children}</Content>
        </Layout>
      )}
    </>
  );
};

export default AdminLayout;