'use client';

import { ReactNode, Suspense } from 'react';
import AppLayout from './AppLayout';
import LoadingSpinner from '../ui/LoadingSpinner';
import ImportLayoutContent from './ImportLayoutContent';

interface ImportLayoutProps {
  children: ReactNode;
  title: string;
  description?: string;
}

export default function ImportLayout({
  children,
  title,
  description
}: ImportLayoutProps) {
  return (
    <AppLayout>
      <div className="max-w-4xl mx-auto">
        <Suspense fallback={
          <div className="flex items-center justify-center py-20">
            <LoadingSpinner size="lg" />
          </div>
        }>
          <ImportLayoutContent title={title} description={description}>
            {children}
          </ImportLayoutContent>
        </Suspense>
      </div>
    </AppLayout>
  );
}