import { lazy, Suspense, useState } from 'react';

//import DateCalculator from './components/DateCalculator';
const DateCalculator = lazy(() => import('./components/DateCalculator'));

function App() {
  const [showDateCalc, setShowDateCalc] = useState(false);

  function openDateCalcHandler() {
    setShowDateCalc(true);
  }

  return (
    <>
      <p>Ta aplikacja może wykonywać rozmaite zadania.</p>
      <p>
        Możesz na przykład otworzyć kalkulator, który oblicza różnicę 
        między dwoma datami.
      </p>
      <button onClick={openDateCalcHandler}>Otwórz kalkulator</button>
      <Suspense fallback={<p>Wczytywanie w toku...</p>}>
        {showDateCalc && <DateCalculator />}
      </Suspense>

    </>
  );
}

export default App;
