import { Provider } from 'react-redux';
import { createTheme } from '@mui/material/styles';
import { green, yellow } from '@mui/material/colors';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import store from './store';
import RestaurantScreen from './components/RestaurantScreen';

const myTheme = createTheme({
  pallette: {
    primary: green,
    secondary: yellow,
  },
});

export default function App(){

  return (
    <Provider store={store}>
      <ThemeProvider theme={myTheme}>
        <CssBaseline />
        <AppBar position="static">
          <Toolbar>
            <Typography variant='h6'>Opinion Ate</Typography>
          </Toolbar>
        </AppBar>
        <Container>
          <RestaurantScreen />
        </Container>
      </ThemeProvider>
    </Provider>
  )
}