// @flow
import { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import type { ThemeProps } from '../../../../types';
import type { SpaceProps } from '../../../../mixins/spacing';
import type { SectionProps } from './section.proptypes';
import { getSpacingRules } from '../../../../mixins/spacing';
import { getPaletteColor } from '../../../../mixins/branding';

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

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

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

CardSection.displayName = 'CardSection';
