// @flow
import { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import { getStackedRules } from '../../../mixins/stacking';
import type { CardProps } from './card.proptypes';
import {
  getCardSpacingRules,
  getBoxShadowColor,
  getCardFontSize,
  getCardBorderRadius,
} from './card.css-rules';

export const Card: StatelessFunctionalComponent<CardProps> = styled.div`
  background-color: ${getPaletteColor('white')};
  border-radius: ${getCardBorderRadius};
  box-shadow: 0 5px 15px 0 ${getBoxShadowColor};
  font-size: ${getCardFontSize};
  ${getCardSpacingRules};
  ${getStackedRules};
`;

Card.displayName = 'Card';
