text: import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { makeStyles } from '@material-ui/core/styles';
  import { Button, Typography } from '@material-ui/core';
  import { SectionHeader, TypedText } from 'components/molecules';
  import { HeroShaped } from 'components/organisms';
  import imageHero from '../../../../assets/images/pexels-chevanon-photography-324028.jpg';
  
  console.log(imageHero);
  const useStyles = makeStyles((theme) => ({
    fontWeight900: {
      fontWeight: 900,
    },
    fontWeight600: {
      fontWeight: 600,
    },
    leftSideContent: {
      '& .section-header__cta-container': {
        [theme.breakpoints.down('xs')]: {
          flexDirection: 'column',
          '& .section-header__cta-item-wrapper': {
            width: '100%',
            '&:last-child': {
              marginLeft: 0,
              marginTop: theme.spacing(1),
            },
            '& .MuiButtonBase-root': {
              width: '100%',
            },
          },
        },
      },
    },
    heroShaped: {
      '& .hero-shaped__image': {
        backgroundColor: theme.palette.alternate.main,
      },
      [theme.breakpoints.down('sm')]: {
        '& .hero-shaped__image': {
          position: 'relative',
        },
        '& .hero-shaped__wrapper': {
          flexDirection: 'column',
        },
      },
    },
    imageAnimation: {
      background: `url(${imageHero})`,
      backgroundRepeat: 'repeat',
      backgroundAttachment: 'scroll',
      backgroundSize: '400px auto',
      animation: `$slideshow 50s linear infinite`,
      width: '600%',
      height: '600%',
      backgroundColor: theme.palette.alternate.dark,
      top: '-25%',
      left: '-100%',
      position: 'absolute',
      [theme.breakpoints.up('sm')]: {
        backgroundSize: '800px auto',
      },
    },
    imageAnimationDark: {
      background: `url("https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png")`,
    },
    '@keyframes slideshow': {
      '0%': {
        transform: 'rotate(-13deg) translateY(-25%)',
      },
      '100%': {
        transform: 'rotate(-13deg) translateY(-80%)',
      },
    },
  }));
  
  const Hero = ({ themeMode = 'light', className, ...rest }) => {
    const classes = useStyles();
  
    const title = (
      <Typography variant='h2' component='span' className={classes.fontWeight900}>
        Welcome to Coffee Space.
        <br />
        <Typography
          variant='h4'
          component='span'
          className={classes.fontWeight600}
        >
          A free space for coffee lover where can you
          <br />
          <TypedText
            component='span'
            variant='h3'
            color='secondary'
            className={classes.fontWeight900}
            typedProps={{
              strings: [
                'discover new recipes.',
                'read some articles.',
                'disscus with others.',
                'and many more...',
              ],
              typeSpeed: 50,
              loop: true,
            }}
          />
        </Typography>
      </Typography>
    );
  
    const subtitle =
      'TheFront will make your product look modern and professional while saving you precious time.';
  
    const docsButton = (
      <Button
        size='large'
        variant='outlined'
        color='primary'
        component='a'
        href='/documentation'
      >
        Documentation
      </Button>
    );
  
    const buyButton = (
      <Button
        size='large'
        variant='contained'
        color='primary'
        component='a'
        href='/home'
      >
        Get started
      </Button>
    );
  
    const leftSideContent = (
      <SectionHeader
        title={title}
        // subtitle={subtitle}
        align='left'
        titleProps={{
          variant: 'h2',
          color: 'textPrimary',
        }}
        data-aos='fade-right'
        disableGutter
        className={classes.leftSideContent}
      />
    );
    return (
      <div className={className} {...rest}>
        <HeroShaped
          className={classes.heroShaped}
          leftSide={leftSideContent}
          rightSide={
            <div
              className={clsx(
                classes.imageAnimation,
                themeMode === 'dark' ? classes.imageAnimationDark : ''
              )}
            />
          }
        />
      </div>
    );
  };
  
  Hero.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
    /**
     * Theme mode
     */
    themeMode: PropTypes.string,
  };
  
  export default Hero;
  