import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Link } from "react-router-dom";
import { LocationDescriptor, Location } from "history";

const useStyles = makeStyles({
  root: {
    flexGrow: 1,
  },
});

function MiniTab(prop: any) {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  return (
    <div>
      <Paper className={classes.root}>
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          centered
        >
          {prop.tabComponents.map(
            (element: {
              label:
                | boolean
                | React.ReactChild
                | React.ReactFragment
                | React.ReactPortal
                | null
                | undefined;
              route:
                | LocationDescriptor<unknown>
                | ((
                    location: Location<unknown>
                  ) => LocationDescriptor<unknown>);
            }) => (
              // <div key={`${element.route}`}>
              <Tab
                key={Math.random()}
                  label={element.label}
                  component={Link}
                  to={element.route}
                />
              // </div>
            )
          )}
        </Tabs>
      </Paper>
    </div>
  );
}

export default MiniTab;