import { withStyles } from '@material-ui/core/styles'
import RootContainer from '../atoms/RootContainer'
import Header from '../organisms/Header'

const styles = theme => ({
  head: {
    width: '100%',
    height: '64px',
    background: theme.palette.secondary.main,
    position: 'fixed',
    zIndex: '1199',
  },
  foot: {
    height: '64px',
    width: '100%',
    position: 'relative',
    top: '64px',
  },
  content: {
    top: '64px',
    height: 'calc(100vh - 64px)',
    position: 'relative',
  }
});

function Layout(props) {

  const { classes } = props;

  return (
    <RootContainer>
      <div id="H" className={classes.head}>
        <div className={classes.inner}>
          <Header searchBar={true}/>
        </div>
      </div>
      <div id="C" className={classes.content}>
        {props.children}
      </div>
     
    </RootContainer>
  )
}

export default withStyles(styles)(Layout)