import { Link } from 'react-router-dom';

// styles
import useStyles from './styles';
import reactLogo from '../../images/react-logo.svg';

import { Button } from '../../components/Wrappers';

function Starter() {
  let classes = useStyles();

  return (
    <div className={classes.root}>
      <div className={classes.starterBlock}>
        <img className={classes.img} src={reactLogo} alt='react' />
        <h3 className='my-3 align-self-center'>
          Welcome to your React Material Admin Full application!
        </h3>
        <p>
          This is a React/Node.JS app generated by the{' '}
          <a href='https://flatlogic.com/generator'>
            Flatlogic Web App Generator
          </a>
          . For guides and documentation please check your local README.md and{' '}
          <a href='https://flatlogic.com/documentation'>
            Flatlogic documentation
          </a>
          .
        </p>
        <div className={classes.buttons}>
          <Button
            className={classes.leftButton}
            component={Link}
            variant='contained'
            color='primary'
            size='large'
            to={'/login?tab=0'}
          >
            Login
          </Button>
        </div>
        <div className={classes.links}>
          <h5>More useful links</h5>
          <div>
            🌟
            <a target={'_blank'} href='https://reactjs.org/' rel="noreferrer">
              {' '}
              ReactJS
            </a>
          </div>
          <div>
            ✨
            <a target={'_blank'} href='https://nodejs.org/en/' rel="noreferrer">
              {' '}
              Node.js
            </a>
          </div>
          <div>
            💫
            <a target={'_blank'} href='https://flatlogic.com/forum/' rel="noreferrer">
              {' '}
              Flatlogic Forum
            </a>
          </div>
          <div>
            ⭐
            <a target={'_blank'} href='https://mui.com/' rel="noreferrer">
              {' '}
              Material-UI
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Starter;
