import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import styles from "assets/jss/nextjs-material-kit/components/navPillsStyle.js";
const useStyles = makeStyles(styles);
export default function NavPills(props) {
const [active, setActive] = React.useState(props.active);
const handleChange = (event, active) => {
setActive(active);
};
const handleChangeIndex = index => {
setActive(index);
};
const classes = useStyles();
const { tabs, direction, color, horizontal, alignCenter } = props;
const flexContainerClasses = classNames({
[classes.flexContainer]: true,
[classes.horizontalDisplay]: horizontal !== undefined
});
const tabButtons = (