import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";

const useStyles = makeStyles(styles);

export default function ProfilePage(props) {
  const classes = useStyles();
  const { ...rest } = props;
  const imageClasses = classNames(
    classes.imgRaised,
    classes.imgRoundedCircle,
    classes.imgFluid
  );
  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  return (
    <Card className={classes.textCenter}>
    <div align="center">
      <CardHeader color="info">Thamrin Group Carrer</CardHeader>
    </div>
    <CardBody>
      <div align="center">
        <h2>Carrer & Job Vacancies</h2>
      </div>
      <GridContainer justify="center">
        <GridItem>
          <NavPills
            alignCenter
            color="primary"
            tabs={[
              {
                tabButton: "S1 & D3",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                  </GridContainer>
                ),
              },
              {
                tabButton: "SMA / SMK / MA",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    
                  </GridContainer>
                ),
              },
              {
                tabButton: "Information",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">

                  </GridContainer>
                ),
              },
              {
                tabButton: "Reqruitment Process",
                tabIcon: Dashboard,
                tabContent: (
                  <GridContainer justify="center">
                    <GridItem>
                    <div align="center">
                      <img
                        alt="..."
                        style={{ width: "1000px", height: "800px", display: "block" }}
                        src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg"
                        className={navImageClasses}
                      />
                    </div>
                    </GridItem>
                  </GridContainer>
                ),
              },
            ]}
          />
        </GridItem>
      </GridContainer>
    </CardBody>
    <CardFooter className={classes.textMuted} textAlign="center">
      © 2020 , All Right Reserved by @Thamrin Brother Company
    </CardFooter>
  </Card>
  );
}