// @flow
import React from 'react';
import styled from 'styled-components';
import { Box } from '../../primitives/box';
import { Span } from '../../core/typography';

import { listItemPropTypes } from './list-item.proptypes';
import type { ListItemProps } from './list-item.proptypes';

const IconBox = styled(Box)`
  padding-top: 2px;
`;

export const ListItem = ({
  icon,
  header,
  body,
  subComponent,
}: ListItemProps) => (
  <Box stacked="row">
    <IconBox spacing="pr2">{icon}</IconBox>
    <Box spacing="mb1">
      <Box spacing="mb1">
        <Span bold fontSize="f2">
          {header}
        </Span>
      </Box>
      <Box spacing="mb1">
        <Span colorName="greyscale-dark" fontSize="f2">
          {body}
        </Span>
      </Box>

      {subComponent != null ? <Box spacing="mb1">{subComponent}</Box> : null}
    </Box>
  </Box>
);

ListItem.displayName = 'ListItem';
ListItem.propTypes = listItemPropTypes;
