import React, { PropTypes } from 'react'
import { NavBar, Icon, Button, CollectionView } from '../../../index'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
}

const CustomButton = ({ className }) =>
  <div className={`${className}`}>
    <NavBar title="Button">
      <NavBar.Item to="/home">
        <Icon type="chevron-left" />MeetUI
      </NavBar.Item>
    </NavBar>

    <CollectionView>
      <CollectionView.Cell flexBasis="33.33%" height="100" className={styles.collectionViewCell}>
        <Button>Default</Button>
      </CollectionView.Cell>
      <CollectionView.Cell flexBasis="33.33%" height="100" className={styles.collectionViewCell}>
        <Button presetStyle="primary">Primary</Button>
      </CollectionView.Cell>
      <CollectionView.Cell flexBasis="33.33%" height="100" className={styles.collectionViewCell}>
        <Button presetStyle="ghost">Ghost</Button>
      </CollectionView.Cell>
    </CollectionView>
  </div>

CustomButton.propTypes = propTypes

export default CustomButton