// @flow
import { getSpacingRules } from '../../../mixins/spacing';
import type { ThemeProps } from '../../../types';
import type { SpaceProps } from '../../../mixins/spacing';
import { getFontSize } from '../../../mixins/typography';
import type { CardProps } from './card.proptypes';

export const getCardSpacingRules = ({
  theme,
  spacing,
}: {|
  ...ThemeProps,
  ...SpaceProps,
|}) => getSpacingRules({ theme, spacing: spacing || 'mb2' });

export const getBoxShadowColor = () => 'rgba(59, 59, 59, 0.05)';
export const getHoverBoxShadowColor = ({ onClick, href }: CardProps) => {
  // If this card isn't clickable, there's no need for the hover state
  // to be different.
  if (onClick == null && href == null) {
    return getBoxShadowColor();
  }

  return 'rgba(59, 59, 59, 0.08)';
};

export const getCardFontSize = ({ theme }: ThemeProps) =>
  getFontSize({ theme, fontSize: 'f1' });

export const getCardBorderRadius = ({ theme }: ThemeProps) =>
  theme.cardBorderRadius;
