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>
);