import styled from 'styled-components';
import { Paragraph } from '../Paragraph';
import { Box, BoxProps } from '../Box';
import { Label } from './Label';

export interface LabeledItemProps extends BoxProps {}

const StyledLabeledItem = styled(Box)<LabeledItemProps>(({ theme }) => ({
  '& + &': {
    marginTop: theme.space[4],
  },

  [`${Paragraph}:last-child`]: {
    marginBottom: 0,
  },
}));

export const LabeledItem = Object.assign(StyledLabeledItem, {
  Label,
});
