import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography, CardContent, Card, Hidden } from '@material-ui/core';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import BookmarkIcon from '@material-ui/icons/Bookmark';
import RoomIcon from '@material-ui/icons/Room';

const useStyles = makeStyles(() => ({
  bodyIcon: {
    fontSize: '90px',
    paddingBottom: '10px',
    paddingTop: '10px',
  },
  paddingBot: {
    paddingBottom: '40px',
  },
  noShadow: {
    border: 'none',
    boxShadow: 'none',
    backgroundColor: 'transparent',
  },
}));

export const Steps: FC = () => {
  const classes = useStyles();

  return (
    <Grid item container alignItems="stretch">
      <Grid item xs={1} lg={2} />

      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
        <CardContent>
          <Typography variant="h4" align="center">
            STEP 1
          </Typography>

          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
          >
            <Grid item xs={12}>
              <VpnKeyIcon color="primary" className={classes.bodyIcon} />
            </Grid>
          </Grid>

          <Typography variant="h6">
            Log In or Register an account on the site. Fill all the fields
            related to your personal information.
          </Typography>
        </CardContent>
      </Grid>

      <Grid item xs={1} />

      <Hidden lgUp>
        <Grid
          item
          xs={12}
          component={Card}
          className={`${classes.paddingBot} ${classes.noShadow}`}
        />
        <Grid item xs={1} />
      </Hidden>

      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
        <CardContent>
          <Typography variant="h4" align="center">
            STEP 2
          </Typography>

          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
          >
            <Grid item xs={12}>
              <BookmarkIcon color="primary" className={classes.bodyIcon} />
            </Grid>
          </Grid>

          <Typography variant="h6">
            Book in the reservation section a free ride at least 48h than your
            appointment
          </Typography>
        </CardContent>
      </Grid>

      <Grid item xs={1} />
      <Hidden lgUp>
        <Grid
          item
          xs={12}
          component={Card}
          className={`${classes.paddingBot} ${classes.noShadow}`}
        />
        <Grid item xs={1} />
      </Hidden>

      <Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
        <CardContent>
          <Typography variant="h4" align="center">
            STEP 3
          </Typography>

          <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
          >
            <Grid item xs={12}>
              <RoomIcon color="primary" className={classes.bodyIcon} />
            </Grid>
          </Grid>

          <Typography variant="h6">
            Wait your free drive compfortably at home and reach the place you
            have booked in the reservation easily!
          </Typography>
        </CardContent>
      </Grid>

      <Grid item xs={1} lg={2} />
    </Grid>
  );
};