/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import * as React from "react";

const CARD_TYPES = {
  BASIC: css`
    background: #ffffff;    
  `,
  DEFAULT: css`
    background: #ffffff;
    box-shadow: 0px 4px 24px rgba(57, 70, 84, 0.15);
    border-radius: 8px;
  `,
  BORDER: css`
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  `,
  GREY: css`
    background: #f5f7fa;
    border-radius: 8px;
  `,
  COURSE: css`
    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.08);
    border: solid 1px #e8edf1;
    border-radius: 8px;
  `,
};

interface IProps {
  type?: string;
  className?: string;
  children: React.ReactNode;
  key?: string;
  css?: any;
}

const CardAtom = (props: IProps) => {
  const { type = "DEFAULT", className = "", children = null } = props;

  return (
    <div
      {...props}
      className={className}
      css={[CARD_TYPES[type], props.css]}
    >
      {children}
    </div>
  );
};

CardAtom.displayName = "CardAtom";

export { CardAtom };