import * as React from 'react'
import classNamed from 'classnamed-components'

const MySection = classNamed("section")`px-6 py-4 bg-white`;
// INSTEAD OF
// const MySection = ({className, ...props}) => {
//   return <section
//     className={`px-6 py-4 bg-white ${className}`}
//     {...props}
//   />
// }

// You can use props to have dynamic class names
const MyButton = classNamed('button')`
  btn shadow
  ${props => ({
    big: 'btn-lg',
    small: 'btn-sm',
  }[props.size])}
`

const MyExample = (props) => (
  <MySection/>
    <MyButton size="big" />
    <MyButton size="small" className="ml-2" />
  <MySection/>
)