import React from "react";
import styles from "./DocsViewer.module.css";
import DocsTabsContentItem from "./DocsTabsContentItem";

export default (props) => {
  return (
    <div className={styles.tabs_contents}>
      {props.tabsList &&
        props.tabsList.map((itemId, index) => {
          let { componentType, ...tabDetail} = props.tabsDetail && props.tabsDetail[itemId] || {};

          return (
            <DocsTabsContentItem
              key={index}
              {...tabDetail}
              propId={itemId}
              componentType={componentType || props.componentType}
              libComponents={props.libComponents}
            />
          );
        })}
    </div>
  );
};
