import { Html, Svg } from 'react-dream-web-builtins'
import { render } from 'react-dom'
 
const withChildren =
 
const Title = Html.H1
  .contramap(() => ({
    children: 'Title'
  }))
  .name('Title')
 
const Square = Svg.Rect
  .contramap(() => ({
    x: 0,
    y: 0,
    width: 100,
    height: 100
  }))
  .name('Square')
 
const Canvas = of(Container => Content => ({ container, content }) =>
    <Container {...container}>
      <Content {...content} />
    </Container>
  )
  .ap(Svg.Svg)
  .ap(Square)
  .name('Canvas')
 
const App = of(North => South => Wrapper => ({ north, south, wrapper, ...props }) =>
    <Wrapper { ...props } { ...wrapper }}>
      <North { ...props } { ...north }} />
      <South { ...props } { ...south }} />
    </Wrapper>
  )
  .ap(Title)
  .ap(Canvas)
  .ap(Html.Section)
  .name('App')
 
App.fork(Component => {
  render(
    <Component />,
    document.getElementById('root')
  )
})