import React from "react";
import PropTypes from "prop-types";
import styles from "./DocsViewer.module.css";
import DocsHeader from "./DocsHeader";
import DocsTabs from "./DocsTabs";
import DocsTabsContent from "./DocsTabsContent";


export default function DocsTabsViewer(props) {
  let { header, tabsList, tabsDetail } = props.docConfig({
    mode : props.mode , theme: props.theme
  },
  props.components
  );

  return (
    <div
      className={
        styles.base + " " + styles[props.colorTheme] + " " + styles[props.mode]
      }
    >
      <DocsHeader
        title={header.title}
        picUrl={header.imgUrl}
        description={header.description}
      />

      <div className={styles.tabs_viewer_controller}>
        <div className={styles.tabs_viewer}>
          <DocsTabs tabsList={tabsList} tabsDetail={tabsDetail} />

          <DocsTabsContent
            componentType={props.componentType}
            libComponents={props.components}
            tabsList={tabsList}
            tabsDetail={tabsDetail}
          />
        </div>
      </div>
    </div>
  );
}

DocsTabsViewer.propTypes = {
  docConfig: PropTypes.func,
  componentType: PropTypes.any,
  components : PropTypes.object,
  header: PropTypes.shape({
    title: PropTypes.string,
    imgUrl: PropTypes.string,
    description: PropTypes.string
  }),

  tabsList: PropTypes.arrayOf(PropTypes.string),
  tabsDetail: PropTypes.object,
  mode: PropTypes.string,
  theme: PropTypes.object,
  colorTheme: PropTypes.string
};
