// @flow
import { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import { getStackedRules } from '../../../mixins/stacking';
import type { EmptyCardProps } from './placeholder-card.proptypes';
import {
  getCardSpacingRules,
  getCardBorderRadius,
} from './placeholder-card.css-rules';
import { bpLarge, bpMedium } from '../../../breakpoints';

/**
 * PlaceholderCard is the transparent background with outline.
 * Supports all props Box does.
 * Also supports custom heights on a per-breakpoint basis.
 */

export const PlaceholderCard: StatelessFunctionalComponent<EmptyCardProps> = styled.div`
  background: transparent;
  border: 1px solid ${getPaletteColor('greyscale-medium')};
  border-radius: ${getCardBorderRadius};
  min-height: ${({ minHeight }) => minHeight};
  text-align: center;

  @media (min-width: ${bpMedium}) {
    min-height: ${({ minHeightMd }) => minHeightMd};
  }

  @media (min-width: ${bpLarge}) {
    min-height: ${({ minHeightLg }) => minHeightLg};
  }

  ${getCardSpacingRules};
  ${getStackedRules};
`;

PlaceholderCard.displayName = 'PlaceholderCard';
