import React from 'react'
import styled, { injectGlobal, css } from 'styled-components'
import Grid from './Grid'

injectGlobal`
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html, body, #app {
    height: 100vh;
    font-family: Arial, sans-serif;
  }
`

const Header = (props) => <div {...props}>Header</div>
Header.displayName = 'Header'
const Aside = (props) => <div {...props}>Aside</div>
Aside.displayName = 'Aside'
const Main = (props) => <div {...props}>Main</div>
Main.displayName = 'Main'
const Footer = (props) => <div {...props}>Footer</div>
Footer.displayName = 'Footer'

const styles = css`
  height: 100vh;
  & > * {
    font-size: 2em;
    background-color: mediumturquoise;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
`

// use area on children
const AppArea = styled(({ className }) => (
  <Grid
    {...{ className }}
    gap="10px"
    template={`
      150px  1fr
      header header 50px
      aside  main   1fr
      footer footer 100px
    `}
  >
    <div area="header">Header</div>
    <div area="aside">Aside</div>
    <div area="main">Main</div>
    <div area="footer">Footer</div>
  </Grid>
))`${styles}`

// use displayName from children component
const AppDisplayName = styled(({ className }) => (
  <Grid
    {...{ className }}
    gap="10px"
    template={`
      150px  1fr
      Header Header 50px
      Aside  Main   1fr
      Footer Footer 100px
    `}
  >
    <Header/>
    <Aside/>
    <Main/>
    <Footer/>
  </Grid>
))`${styles}`

// use both !
const AppBoth = styled(({ className }) => (
  <Grid
    {...{ className }}
    gap="10px"
    template={`
      150px  1fr
      Header Header 50px
      Aside  main   1fr
      Footer Footer 50px
    `}
  >
    <Header/>
    <Aside/>
    <main area="main">Main</main>
    <Footer/>
  </Grid>
))`${styles}`

// export default AppArea
// export default AppDisplayName
export default AppBoth