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

// 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 Quote from "components/Typography/Quote.js"
import Grid from '@material-ui/core/Grid';
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Icon from "@material-ui/core/Icon";

const useStyles = makeStyles(styles);

const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
  const classes = useStyles();
  const { ...rest } = props;
  const imageClasses = classNames(
    classes.imgRaised,
    classes.imgRoundedCircle,
    classes.imgFluid
  );
  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  const CarrerS1 = s1.map((data) => {
    return (
      <Grid style={{width:"600px", padding:"30px"}}>
        <Card>
          <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
          <CardBody>
            <Quote
              text={data.name_description}
              author="Post By Thamrin Group"
            />
            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
            </Button>
          </CardBody>
        </Card>
      </Grid>
    );
  })
  const CarrerD3 = d3.map((data) => {
    return (
      <Grid style={{width:"600px", padding:"30px"}}>
        <Card>
          <CardHeader color="danger">{data.name}</CardHeader>
          <CardBody>
            <Quote
              text={data.name_description}
              author="Post By Thamrin Group"
            />
            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
            </Button>
          </CardBody>
        </Card>
      </Grid>
    );
  })
  const CarrerSMA = sma.map((data) => {
    return (
      <Grid style={{width:"600px", padding:"30px"}}>
        <Card>
          <CardHeader justify="center" color="danger">{data.name}</CardHeader>
          <CardBody>
            <Quote
              text={data.name_description}
              author="Post By Thamrin Group"
            />
            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
            </Button>
          </CardBody>
        </Card>
      </Grid>
    );
  })
  return (
    <Card className={classes.textCenter}>
      <div align="center">
        <CardHeader color="info">Product</CardHeader>
      </div>
      <CardBody>
        <div align="center">
          <h2>Carrer & Job Vacancies</h2>
        </div>
          <GridContainer justify="center">
            <GridItem>
              <NavPills
                alignCenter
                color="primary"
                tabs={[
                  {
                    tabButton: "S1",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {CarrerS1}{CarrerS1}{CarrerS1}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "D3",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {CarrerD3}
                        {CarrerD3}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "SMA / SMK ",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {CarrerSMA}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Recruitment 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>
    </Card>
  );
}

export default DataCarrers;