// @flow
import React from 'react'
import withProps from 'recompose/withProps'
import { map } from 'ramda'
import Box from '../../elements/Box'
import Text from '../../elements/Text'

type Props = {
  headers: Array<string>,
  rows: Array<{
    values: Array<string>,
  }>,
}

const Table = ({ headers, rows }: Props) => (
  <TableEl>
    <thead>
      <tr>
        { map(header => (
          <Th key={header}>
            {header}
          </Th>
        ), headers) }
      </tr>
    </thead>
    <tbody>
      { map(row => (
        <tr key={`row-${row.values[0]}`}>
          { map(datum => (
            <Td key={datum}>
              {datum}
            </Td>
          ), row.values) }
        </tr>
      ), rows) }
    </tbody>
  </TableEl>
)

// -------------------------------------

const Th = withProps({
  fontSize: 2,
  fontWeight: 'normal',
  color: 'blue',
  textAlign: 'left',
  pb: 2,
})(Text.withComponent('th'))

const Td = withProps({
  fontSize: 2,
  color: 'darkGray',
  pb: 2,
})(Text.withComponent('td'))

const TableEl = withProps({
  maxWidth: 600,
})(Box.withComponent('table'))

export default Table