import styled from "styled-components";
import React from "react";
import { primaryColor, primaryTxtColor, invertedTxtColor } from "../../config";
import {
  sizeStyle,
  fontStyle,
  designStyle,
  elementProps,
  gridStyle,
  SizeStyle,
} from "../generator";

const CardEl = styled.div<{ props: any }>`
  ${(props: any) => `
    ${props.grid ? gridStyle(props) : ""}
    ${fontStyle(props, false)}
    ${designStyle(props)}`}
  ${({ hover, bgColor, invert, minWidth, padding, margin, width }: any) => `
  background: ${invert ? primaryColor : bgColor || "white"};
    ${sizeStyle({ margin, padding, minWidth, width })}
    ${
      hover &&
      `&:hover { 
        transform: scale(1.1); 
    }
    `
    }`}
`;

export const Card = (props: any) => {
  const {
    border,
    children,
    shadow = false,
    invert = false,
    selected,
  } = props;

  const {
    margin = "1em .5em",
    padding = ".8em 1em",
    minWidth = "3em",
    width,
  } = props as SizeStyle;

  props = { ...props, ...{ margin, width, padding, minWidth } };
  const elProps = elementProps(props);

  const style = {
    boxShadow: selected? "0 .25em .5em dodgerblue": shadow === false? "" : "0 .25em .5em rgba(0,0,0,.5)",
    color: invert ? invertedTxtColor : primaryTxtColor,
    border: border ? `${border} solid` : "",
  };

  return (
    <CardEl {...props} style={style} {...elProps}>
      {children}
    </CardEl>
  );
};

export default Card;