export const Table = ({ thead, tbody }) =>
  <div>
    <table>
      <thead>
        {thead}
      </thead>
      <tbody>
        {tbody}
      </tbody>
    </table>
    <style jsx>{`
      div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
      }
      table {
        border-spacing: 0;
        padding: 1em 0;
        text-align: left;
      }
    `}</style>
  </div>

export const Head = ({ children }) =>
  <th>
    {children}
    <style jsx>{`
      th {
        padding: 0.3em 0.5em;
      }
    `}</style>
  </th>

export const Cell = ({ children }) =>
  <td>
    {children}
    <style jsx>{`
      td {
        padding: 0.3em 0.5em;
        vertical-align: top;
        white-space: nowrap;
      }
    `}</style>
  </td>