import React from 'react';
import styled from 'styled-components';

const Wrapper = styled('div')<{styles?: string[]}>`
  ${props => props.styles}
  width: 100%;
`;

const properties: {[index: string]: string} = {
  m: 'margin',
  p: 'padding',
  d: 'display',
  jc: 'justify-content',
  a: 'align-items',
  fd: 'flex-direction',
};

const directions: {[index: string]: string} = {
  t: 'Top',
  r: 'Right',
  b: 'Bottom',
  l: 'Left',
};

type Props = any;

const Box: React.FunctionComponent<Props> = (props) => {
  const {children, ...rest} = props;
  const args = Object.keys(rest);

  const styles = args.map((ele: string) => {
    const property = properties[ele[0]];
    const direction = directions[ele[1]];
    if (direction) {
      return `${property}-${direction}: ${props[ele]}px;`;
    }
    return `${property}: ${props[ele]};`;
  });

  return (
    <Wrapper
      styles={styles}
    >
      {children}
    </Wrapper>
  );
};

export default Box;
