import React, { FC } from "react";
import { Tab as TabMui } from "@mui/material";
import { TabProps } from "./types";
import { useLocale } from "../../hooks/useLocale";

export const Tab: FC<TabProps> = ({ label = '', index = 0 }) => {
  const labels = useLocale(label)
  return (
      <TabMui
        label={labels}
        value={index}
        tabIndex={index}
        id={`simple-tab-${index}`}
        aria-controls={`simple-tabpanel-${index}`}
      />
    
  );
};

export const createTab = (children: JSX.Element[]) => {
  return children.map((item: JSX.Element, index: number) => {
    const { props } = item;
    return <Tab key={index} index={props.index} label={props.label} />;
  })
}
