import React from 'react';
import './App.css';
import ScreenWrapper from "./meta/ScreenWrapper";
import PanelWrapper from "./meta/PanelWrapper";
import PanelTitle from "./meta/PanelTitle";
import PanelContent from "./meta/PanelContent";
import FahrplanPanel from "./panels/Fahrplan/FahrplanPanel";
import LayoutElement from "./layout/LayoutElement";
import useLayout from "./hooks/useLayout";
import {PanelRenderers} from "./panels/_Panels";

function App() {
  const layout = useLayout();

  if(!layout) {
    return (
      <div>
        Loading...
      </div>
    )
  }

  return (
    <div className={"overflow-hidden w-screen h-screen bg-zinc-950 text-white"} style={{fontFamily: "Inter"}}>
      <ScreenWrapper>
        {
          layout.panels.map(panel => {
            const Renderer = PanelRenderers[panel.type];

            return (
              <Renderer definition={panel.config} />
            )
          })
        }
      </ScreenWrapper>
    </div>
  );
}

export default App;