import React from "react";
import { FontIcon, ListItem as RMDListItem } from "react-md";
import style from "./style";

/**
 * This component lets you display multiple line items vertically as a single continuous element.
 * @param {object} props The props
 * @returns {function} The component
 */
const ListItem = props => {
  const conditionalLIcon =
    props.leftIcon || props.icon
      ? {
          leftIcon: <FontIcon>{props.leftIcon || props.icon}</FontIcon>
        }
      : null;
  const conditionalRIcon = props.rightIcon
    ? { rightIcon: <FontIcon>{props.rightIcon}</FontIcon> }
    : null;
  return (
    <RMDListItem
      {...props}
      {...conditionalLIcon}
      {...conditionalRIcon}
      primaryText={props.children}
      style={style}
    >
      &nbsp;
    </RMDListItem>
  );
};

ListItem.defaultProps = {};

export default ListItem;