import styled from "styled-components";
import { space } from "styled-system";
import { colors } from "@crave/farmblocks-theme";
import { cardTypes, cardTypeColors } from "../constants/cardTypes";

const boxShadow = props => {
  if (props.boxShadow) {
    return props.boxShadow;
  }

  return props.floating
    ? `0 4px 4px 0 ${colors.GREY_16}`
    : `0 1px 1px 0 ${colors.GREY_16}`;
};

const backgroundColor = props => {
  return Object.keys(cardTypeColors).includes(props.type)
    ? cardTypeColors[props.type]
    : cardTypeColors[cardTypes.DEFAULT];
};

const Card = styled.div`
  background-color: ${backgroundColor};
  box-shadow: ${boxShadow};
  border: solid 1px ${colors.GREY_16};
  width: ${props => props.width};
  box-sizing: border-box;
  border-radius: 4px;
  overflow: ${props => props.overflow};
  ${space}
`;

export default Card;

@@ -122,16 +122,17 @@
 theme%22;%0A
+%0A
 import %7B
@@ -336,18 +336,18 @@
 rs.GREY_
-16
+08
 %7D%60%0A    :
@@ -374,18 +374,18 @@
 rs.GREY_
-16
+08
 %7D%60;%0A%7D;%0A%0A
@@ -686,10 +686,10 @@
 REY_
-16
+08
 %7D;%0A 

change border and box shadow color