import React from "react";
import styled, { createGlobalStyle } from "styled-components";

import SearchBar from "./components/searchBar";
import Greeter from "./components/greeter";
import AppList from "./components/appList";
import BookmarkList from "./components/bookmarkList";
import SettingsModal from "./components/settingsModal";

import selectedTheme from "./components/themeManager";

const GlobalStyle = createGlobalStyle`
  body {
    background-color: ${selectedTheme.backgroundColor};
  }
`;

const AppContainer = styled.div`
    max-width: 80%;
    margin: auto;
    padding: 10px;
`;

const App = () => (
    <>
        <GlobalStyle />
        <AppContainer>
            <SearchBar />
            <SettingsModal />
            <Greeter />
            <AppList />
            <BookmarkList />
        </AppContainer>
    </>
);

export default App;