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

const StyledBox = styled.div`
  background-color: #fff;
  padding: 14px 21px;
  border-radius: 9px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

  ${(props) => props.minHeight && `min-height: ${props.minHeight}`};
  ${(props) => props.height && `height: ${props.height}`};
  ${(props) => props.maxHeight && `max-height: ${props.maxHeight}`};
`;

const Box = (props) => {
  const { children, minHeight, maxHeight, height, ...rest } = props;

  const boxMinHeight = typeof minHeight === "number" || !isNaN(Number(minHeight)) ? `${minHeight}px` : minHeight;
  const boxHeight = typeof height === "number" || !isNaN(Number(height)) ? `${height}px` : height;
  const boxMaxHeight = typeof maxHeight === "number" || !isNaN(Number(maxHeight)) ? `${maxHeight}px` : maxHeight;

  return (
    <StyledBox minHeight={boxMinHeight} height={boxHeight} maxHeight={boxMaxHeight} {...rest}>
      {children}
    </StyledBox>
  );
};

export default Box;