import React from "react";
import PropTypes from "prop-types";
import styles from "./List.module.css";

export default function List(props) {
  let { style, variant, label, header, footer, size, rhs, lhs } = props;
  return (
    <div className={styles.listContainer}>
      {header ? <div className={styles.header}>header</div> : null}
      <div className={styles.list + " " + styles[variant] + " " + styles[size]}>
        {lhs ? <div className={styles.listLHS}>LHS</div> : null}
        <div className={styles.listContent}>{label}</div>
        {rhs ? <div className={styles.listRHS}>RHS</div> : null}
      </div>
      {footer ? <div className={styles.footer}>footer</div> : null}
    </div>
  );
}

List.defaultProps = {
  label: "Label Text"
};

if (__DOCS__) {
  List.docs = {
    componentGroup: "Atom"
  };
}
