import React, { useState, useEffect } from 'react';
import AdminLayout from '@/layouts/admin';

interface PageWrapperProps {
  children: React.ReactNode;
  title: string;
  description?: string;
  className?: string;
}

export default function PageWrapper({ 
  children, 
  title, 
  description, 
  className = "container mx-auto max-w-7xl px-3 lg:px-6 py-8" 
}: PageWrapperProps) {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // 使用短暂的延迟确保组件完全加载，避免闪烁
    const timer = setTimeout(() => {
      setIsReady(true);
    }, 50);

    return () => clearTimeout(timer);
  }, []);

  if (!isReady) {
    return (
      <AdminLayout>
        <div className="container mx-auto max-w-7xl px-3 lg:px-6 py-8">
          <div className="flex items-center justify-center h-64">
            <div className="flex items-center gap-3">
              <div className="animate-spin h-5 w-5 border-2 border-gray-200 dark:border-gray-700 border-t-gray-600 dark:border-t-gray-300 rounded-full"></div>
              <span className="text-default-600"></span>
            </div>
          </div>
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <div className={className}>
        <div className="mb-6">
          <h1 className="text-2xl font-bold mb-2 text-foreground">{title}</h1>
          {description && (
            <p className="text-default-600">{description}</p>
          )}
        </div>
        {children}
      </div>
    </AdminLayout>
  );
} 