import React from "react";
import styles from "../tab/tab.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";

export function TabContainerLayer(props) {
  let { customClassName = {}, children } = props;
  let tabContainerClassName = getCompliedClassName(
    customClassName,
    {
      [styles.tabbase]: true
    },
    {
      [customClassName.tabbase]: customClassName.tabbase
    }
  );

  return (
    <div role="tablist" className={tabContainerClassName}>
     
      {children}{" "}
    </div>
  );
}

export default function TabContainer(props) {
  return <TabContainerLayer> {props.children} </TabContainerLayer>;
}

export function TabContext(props) {
  return <TabContainerLayer> {props.children} </TabContainerLayer>;
}

export function TabBar(props) {
  return <div>{props.children}</div>;
}

export function Tab(props) {
  return <div>{props.children}</div>;
}

export function TabContent(props) {
  return <div>{props.children}</div>;
}

export function TabPanel(props) {
  return <div>{props.children}</div>;
}
