// @flow
import React, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import { Box } from '../../..';

const ThLeft = styled.th`
  text-align: left;
`;

export const SpaceAmountsTable = () => {
  const theme = useContext(ThemeContext);

  return (
    <table>
      <tbody>
        <tr>
          <ThLeft>Level:</ThLeft>
          {Object.keys(theme.spacing).map((level) => (
            <td key={level}>
              <Box spacing="mr1">{level}</Box>
            </td>
          ))}
        </tr>
        <tr>
          <ThLeft>Amount:</ThLeft>
          {Object.values(theme.spacing).map((value) => (
            <td key={String(value)}>
              <Box spacing="mr1">{String(value)}</Box>
            </td>
          ))}
        </tr>
      </tbody>
    </table>
  );
};
