// @flow
import styled from 'styled-components';

import type { PatchworkComponent, ThemeProps } from '../../../../types';
import type { SpaceProps } from '../../../../mixins/spacing';
import { spacePropTypes, getSpacingRules } from '../../../../mixins/spacing';

import { getPaletteColor } from '../../../../mixins/branding';

const style = ({ theme, spacing }: SpaceProps & ThemeProps) => ({
  ...getSpacingRules({ theme, spacing }),
});

export const CardSection: PatchworkComponent<SpaceProps> = styled.div.attrs(
  props => ({
    style: style(props),
  }),
)`
  border-bottom: solid 1px ${getPaletteColor('greyscale-light')};

  &:last-of-type {
    border-bottom: none;
  }
`;

CardSection.displayName = 'CardSection';
CardSection.propTypes = spacePropTypes;
