import React from 'react';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

import AppRoutes from './AppRoutes';

import './index.css'
import '@ionic/react/css/core.css';

import Header from './components/Header';
import Footer from './components/Footer';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>

<div className='flex flex-col h-screen bg-green-300'>
  <Header />

  {/* Контент с отступом равным высоте Header */}
  <div className='flex-1 overflow-auto'>
    <IonRouterOutlet>
      <AppRoutes />
    </IonRouterOutlet>
  </div>

  <Footer />
</div>

    </IonReactRouter>
  </IonApp>
);

export default App;