import React, { Suspense } from 'react';
import ErrorBoundary from '../shared/ErrorBoundary';
import Header from './Header';
import Navigation from './Navigation';
import { useLocation } from 'react-router-dom';
import styles from './Layout.module.css';

interface LayoutProps {
  children: React.ReactNode;
}

const ErrorFallback = () => (
  <div className={styles.error}>
    <h2>Что-то пошло не так</h2>
    <button onClick={() => window.location.reload()}>
      Обновить страницу
    </button>
  </div>
);

const LoadingFallback = () => (
  <div className={styles.loading}>
    Загрузка...
  </div>
);

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const location = useLocation();
  const isOnboarding = location.pathname.includes('/onboarding');
  const isCropPhoto = location.pathname === '/crop-photo';

  // Не показываем header и navigation на экранах онбординга и обрезки фото
  if (isOnboarding || isCropPhoto) {
    return <>{children}</>;
  }

  return (
    <div className={styles.layout}>
      <Header />
      <main className={styles.main}>
        <div className={styles.container}>
          <Suspense fallback={<LoadingFallback />}>
            <ErrorBoundary FallbackComponent={ErrorFallback}>
              {children}
            </ErrorBoundary>
          </Suspense>
        </div>
      </main>
      <Navigation />
    </div>
  );
};

export default Layout;
