import React, {useContext, useState, Suspense} from 'react';

import Chrome from './Chrome';

import Page from './Page';

import Page2 from './Page2';

import Theme from './Theme';

function LoadingIndicator() {

  let theme = useContext(Theme);

  return <div className={theme + '-loading'}>Loading...</div>;

}

function Content() {

  let [CurrentPage, switchPage] = useState(() => Page);

  return (

    <div>

      <h1>Hello World</h1>

      <a className="link" onClick={() => switchPage(() => Page)}>

        Page 1

      </a>

      {' | '}

      <a className="link" onClick={() => switchPage(() => Page2)}>

        Page 2

      </a>

      <Suspense fallback={<LoadingIndicator />}>

        <CurrentPage />

      </Suspense>

    </div>

  );

}

export default function App({assets}) {

  return (

    <Chrome title="Hello World" assets={assets}>

      <Content />

    </Chrome>

  );

}