import preact from 'preact'
import { PropTypes } from 'preact-compat'
import styles from './Large.css'
const cx = require('classnames/bind').bind(styles)
const hasTitle = title => title ? '' : styles.hidden // eslint-disable-line no-confusing-arrow
const Large = props => (
  <button
    className={styles.root}
    {...props}
  >
    <div className={styles.content}>
      {props.children}
      <div
        className={cx(
          'title',
          `${hasTitle(props.title)}`
        )}
      >
        {props.title}
      </div>
    </div>
  </button>
)

Large.propTypes = {
  children: PropTypes.array,
  title: PropTypes.string,
}

export default Large