import styled from 'styled-components';
import {
  boxShadow,
  BoxShadowProps,
  borderRadius,
  BorderRadiusProps
} from 'styled-system';
import { Box, BoxProps } from '../../components/Box';

export interface CardProps extends BoxProps {
  borderRadius: BorderRadiusProps;
  boxShadow: BoxShadowProps;
}

export const Card = styled(Box)<CardProps>(boxShadow, borderRadius, {
  display: 'block',
  backgroundColor: 'white'
});

Card.defaultProps = {
  borderRadius: 3,
  boxShadow: 2,
  p: 'xl'
};
