import React from 'react';
import './Box.css';

export default props => {
  const styleList = [];
  styleList.push('Box');
  if (props.dxDark) {
    styleList.push('Darker');
  }

  if (props.dxSlideOut) {
    styleList.push('SlideOut');
  } else if (props.dxFadeIn) {
    styleList.push('FadeIn');
  } else if (props.dxSlideOutTop) {
    styleList.push('SlideOutTop');
  }

  return (
    <div
      onClick={props.clicked}
      className={styleList.join(' ')}
      style={{...props.dxStyle}}>
      {props.children}
    </div>
  );

};