import { Tabs as MuiTabs } from "@mui/material"
import { CustomTab } from "./CustomTab"

type TabsProps = {
  names: string[];
  items: string[];
  selectedItem: "count" | "day";
  setSelectedItem: (num: "count" | "day") => void;
};

export const Tabs = ({ items, names, selectedItem, setSelectedItem }: TabsProps) => (
 <MuiTabs
 sx={{m:"25px"}}
   TabIndicatorProps={{ sx: { display: "none" } }}
   value={selectedItem}
   onChange={(event, newValue: "count" | "day") => {
    console.log(newValue)
    setSelectedItem(newValue)
}}
   variant="scrollable"
   scrollButtons={false}
 >
  {items.map((item, index) => (
   <CustomTab key={item + index} value={item} label={names[index]} />
  ))}
 </MuiTabs>
)