import { Outlet } from 'react-router-dom';
import { Footer } from './Footer';
import { Header } from './Header';
import { Contacts } from '../Contacts';
import { ScrollToHashElement } from './ScrollToHashElement';
import { ModalContainer } from './ModalContainer';
import { Ellipse } from './Ellipse';
import { useWindowWidth } from '../../hooks/useWindowWidth';

export function Layout() {
  const width = useWindowWidth();

  return (
    <div className="overflow-clip">
      <ScrollToHashElement />
      <Header />
      <main className="relative px-4 sm:px-6">
        {width >= 1024 && <Ellipse />}
        <Outlet />
      </main>
      <Contacts />
      <Footer />
      <ModalContainer />
    </div>
  );
}
