content: import React from 'react'
  import PropTypes from 'prop-types'
  
  import { Table } from 'antd'
  
  import Loader from 'components/Loader'
  
  import style from './style.scss'
  
  const timeColumns = [{
    title: 'Start times',
    dataIndex: 'start_times',
    key: 'start_times',
  }, {
    title: 'Action',
    key: 'action',
    render: () => (
      <span>
        <a href="">Book from this hour</a>
      </span>
    ),
  }]
  
  const columns = [{
    title: 'Date',
    dataIndex: 'date',
    key: 'date',
  }, {
    title: 'Start times',
    key: 'start_times',
    render: (text, record) => (
      <Table
        size="small"
        className={style.table}
        columns={timeColumns}
        dataSource={record.start_times.map(startTime => ({ start_times: startTime }))}
        pagination={false}
        showHeader={false}
      />
    ),
  }]
  
  const SuggestionsTable = (props) => {
    if (props.isFetching) {
      return (
        <Loader
          message="Fetching suggestions ..."
        />
      )
    }
  
    if (props.suggestions.length === 0) {
      return (
        <h2>No suggestion found</h2>
      )
    }
    return (
      <Table
        size="small"
        className={style.table}
        columns={columns}
        dataSource={props.suggestions}
        pagination={false}
      />
    )
  }
  
  SuggestionsTable.defaultProps = {
    suggestions: [],
  }
  
  SuggestionsTable.propTypes = {
    isFetching: PropTypes.bool.isRequired,
    suggestions: PropTypes.arrayOf(PropTypes.shape({
      date: PropTypes.string.isRequired,
      start_times: PropTypes.arrayOf(PropTypes.string),
    })),
  }
  
  export default SuggestionsTable
  