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

const style = ({
  theme,
  spacing,
  stacked,
  justify,
  align,
}: ThemeProps & CardProps) => ({
  ...getCardSpacingRules({ theme, spacing }),
  ...getStackedRules({ stacked, justify, align }),
});

export const Card: PatchworkComponent<CardProps> = styled.div.attrs(props => ({
  style: style(props),
}))`
  display: ${getStackedDisplay};
  background-color: ${getPaletteColor('white')};
  border-radius: ${getCardBorderRadius};
  box-shadow: 0 5px 15px 0 ${getBoxShadowColor};
  font-size: ${getCardFontSize};
`;

Card.displayName = 'Card';
