import React, { PropTypes } from 'react'
import TableViewCell from '../TableViewCell'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  header: PropTypes.string,
  footer: PropTypes.string,
}

const defaultProps = {
  className: '',
}

const TableView = ({
  className,
  children,
  header,
  footer,
}) =>
  <ul
    className={`${styles.tableView} ${className}`}
  >
    {header !== undefined ? <li className={styles.header}>{header}</li>
      : <li className={styles.separator}></li>}
    {children}
    {footer !== undefined ? <li className={styles.footer}>{footer}</li>
      : <li className={styles.separator}></li>}
  </ul>

TableView.propTypes = propTypes
TableView.defaultProps = defaultProps
TableView.Cell = TableViewCell

export default TableView