import Tabs from "@/app/component/Tabs";
import IsTurnsDetails from "../sidebars/turns/isTurnsDetails";

function HeadTab({
  tab,
  user,
  listTab,
  handleChange,
  isTurnsDetails,
  setIsTurnsDetails,
  components,
}) {
  return (
    <div className="opacity-page">
      {isTurnsDetails ? (
        <IsTurnsDetails
          user={user}
          setIsTurnsDetails={setIsTurnsDetails}
        />
      ) : (
        <>
          <div className="!w-full">
            <Tabs
              style={{
                ".MuiTabs-indicator": {
                  height: "2px",
                  borderRadius: "16px",
                  background: "#5559CE",
                },
                "& .MuiTabs-scroller": {
                  borderBottom: "1px solid #EFEFEF",
                },
                "& .MuiTabs-flexContainer": {
                  paddingRight: "15px",
                  paddingLeft: "15px",
                },
                "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
                  color: "#5559CE !important",
                },
                "& .MuiButtonBase-root.Mui-selected": {
                  color: "#5559CE !important",
                },
              }}
              value={tab}
              color="#5559CE"
              listTab={listTab}
              handleChange={handleChange}
            />
          </div>
          <div className="my-[22px] px-0 md:px-[24px]">{components[tab]}</div>
        </>
      )}
    </div>
  );
}

export default HeadTab;