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

const propTypes = {
  className: PropTypes.string,
}

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

    <CollectionView>
      <CollectionView.Cell
        flexBasis="25%"
        height="50"
        borderRight=".5px solid #C8C7CC"
        borderBottom=".5px solid #C8C7CC"
      >
        25%
      </CollectionView.Cell>
      <CollectionView.Cell
        flexBasis="25%"
        height="50"
        borderRight=".5px solid #C8C7CC"
        borderBottom=".5px solid #C8C7CC"
      >
        25%
      </CollectionView.Cell>
      <CollectionView.Cell
        flexBasis="25%"
        height="50"
        borderRight=".5px solid #C8C7CC"
        borderBottom=".5px solid #C8C7CC"
      >
        25%
      </CollectionView.Cell>
      <CollectionView.Cell
        flexBasis="25%"
        height="50"
        borderBottom=".5px solid #C8C7CC"
      >
        25%
      </CollectionView.Cell>
      <CollectionView.Cell
        flexBasis="25%"
        height="50"
        borderRight=".5px solid #C8C7CC"
        borderBottom=".5px solid #C8C7CC"
      >
        25%
      </CollectionView.Cell>
      <CollectionView.Cell
        flexBasis="25%"
        height="50"
        borderRight=".5px solid #C8C7CC"
        borderBottom=".5px solid #C8C7CC"
      >
        25%
      </CollectionView.Cell>
    </CollectionView>
  </div>

CustomCollectionView.propTypes = propTypes

export default CustomCollectionView