import React from 'react';
import { BackupRestoreProvider } from './BackupRestoreContext';
import { ThemeProvider } from '../contexts/ThemeContext';
import { ErrorBoundary } from '../components/ErrorBoundary';
import { BackupRestoreHeader } from './components/BackupRestoreHeader';
import { BackupRestoreSidebar } from './components/BackupRestoreSidebar';
import { StepContent } from './components/StepContent';
import { SidebarProvider } from '../components/ui/sidebar';

const BackupRestoreContent: React.FC = () => {
  return (
    <div className="h-full flex flex-col bg-background overflow-hidden">
      <BackupRestoreHeader />
      <SidebarProvider defaultOpen={true}>
        <div className="flex flex-1 min-h-0">
          <BackupRestoreSidebar />
          <div className="flex flex-col flex-1 min-h-0">
            <StepContent />
          </div>
        </div>
      </SidebarProvider>
    </div>
  );
};

export const BackupRestore: React.FC = () => {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <BackupRestoreProvider>
          <BackupRestoreContent />
        </BackupRestoreProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
};
