text: import React, {Component} from 'react'
  import {makeStyles, useTheme} from '@material-ui/core/styles'
  import MobileStepper from '@material-ui/core/MobileStepper'
  import Paper from '@material-ui/core/Paper'
  import Typography from '@material-ui/core/Typography'
  import Button from '@material-ui/core/Button'
  import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
  import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
  // import SwipeableViews from 'react-swipeable-views'
  // import {autoPlay} from 'react-swipeable-views-utils'
  
  const tutorialSteps = [
    {
      label: 'San Francisco – Oakland Bay Bridge, United States',
      imgPath:
        'https://2.bp.blogspot.com/-V2rgpMjavto/W7jK7KrVivI/AAAAAAAAFq4/eQV-TZYZoJo1fQCniEQWqUTFP3cEYbykACLcBGAs/s1600/Romantic%2BLove.jpg'
    },
    {
      label: 'Bird',
      imgPath:
        'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60'
    },
    {
      label: 'Bali, Indonesia',
      imgPath:
        'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80'
    },
    {
      label: 'NeONBRAND Digital Marketing, Las Vegas, United States',
      imgPath:
        'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60'
    },
    {
      label: 'Goč, Serbia',
      imgPath:
        'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60'
    }
  ]
  
  const useStyles = makeStyles(theme => ({
    root: {
      maxWidth: '100%',
      flexGrow: 1,
      alignItems: 'center'
    },
    header: {
      display: 'flex',
      alignItems: 'center',
      height: '100%',
      paddingLeft: theme.spacing(100),
      paddingRight: theme.spacing(100),
      backgroundColor: theme.palette.background.default
    },
    img: {
      height: '100%',
      alignItems: 'center',
      maxWidth: '100%',
      overflow: 'hidden',
      paddingLeft: theme.spacing(22),
      paddingRight: theme.spacing(22),
      display: 'block',
      width: '79%'
    }
  }))
  
  export default function Home() {
    const classes = useStyles()
    const theme = useTheme()
    const [activeStep, setActiveStep] = React.useState(0)
    const maxSteps = tutorialSteps.length
  
    function handleNext() {
      setActiveStep(prevActiveStep => prevActiveStep + 1)
    }
  
    function handleBack() {
      setActiveStep(prevActiveStep => prevActiveStep - 1)
    }
  
    return (
      <div className={classes.root}>
        <Paper square elevation={0} className={classes.header}>
          <Typography>{tutorialSteps[activeStep].label}</Typography>
        </Paper>
        <img
          className={classes.img}
          src={tutorialSteps[activeStep].imgPath}
          alt={tutorialSteps[activeStep].label}
        />
        <MobileStepper
          steps={maxSteps}
          position="static"
          variant="text"
          activeStep={activeStep}
          nextButton={
            <Button
              size="small"
              onClick={handleNext}
              disabled={activeStep === maxSteps - 1}
            >
              Next
              {theme.direction === 'rtl' ? (
                <KeyboardArrowLeft />
              ) : (
                <KeyboardArrowRight />
              )}
            </Button>
          }
          backButton={
            <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
              {theme.direction === 'rtl' ? (
                <KeyboardArrowRight />
              ) : (
                <KeyboardArrowLeft />
              )}
              Back
            </Button>
          }
        />
      </div>
    )
  }
  