import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const FlexStyles = styled('div')`${props=>`
	display:flex;
	${props.column? `flex-direction:column;` : ''}
	${props.background? `background:${props.background};` : ''}
	${props.height? `height:${props.height};` : ''}
	${props.width? `width:${props.width};` : ''}
	${props.left||props.right ? `justify-content:flex-${props.left?'start':'end'};` : ''}
	${props.hCenter?`${props.column ? 'align-items:center' : 'justify-content:center;'};`:''}
	${props.vCenter?`${props.column ? 'justify-content:center;' : 'align-items:center'};`:''}
	${props.center?` justify-content:center; align-items:center;` : ''}
	${props.space?`justify-content:space-between;`:''}
	${props.wrap?`flex-wrap:wrap;`:''}
	${props.border?`border:${props.border};`:''}
	${props.padding?`padding:${props.padding};`:''}
	${props.margin?`margin:${props.margin};`:''}
	${props.color?`color:${props.color};`:''}
	${props.background?`background:${props.background};`:''}
	${props.padding?`padding:${props.padding};`:''}
	${props.alignItems?`align-items:${props.alignItems};`:''}
	${props.justifyContent?`justify-content:${props.justifyContent};`:''}
`}`

const Row = (props)=>{
	return(
		<FlexStyles {...props}>{props.children}</FlexStyles>
	)
}

const Column=(props)=>{
	return(
		<FlexStyles {...props} column>{props.children}</FlexStyles>
	)
}

export {Row, Column}