import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Layout from "../components/templates/Layout";
import AccountProfile from "../components/organisms/AccountProfile";
import { Typography } from '@material-ui/core';
import Head from 'next/head'
import AdBlockDetect from 'react-ad-block-detect';

const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%'
    },
    button: {
        marginRight: theme.spacing(1)
    },
    completed: {
        display: 'inline-block'
    },
    instructions: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
    },
    information: {
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: theme.palette.primary.main,
      color: "#fff",
      fontWeight: '700',
      fontSize: '1.15em',
      fontFamily: 'Roboto',
      [
          theme
              .breakpoints
              .up('md')
      ]: {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'flex-start',
          justifyContent: 'space-around',
          backgroundColor: theme.palette.primary.main,
          padding: theme.spacing(2, 2)
      },
      '& a': {
          textDecoration: 'none'
      },
      texteBlanc: {
        color: "#fff",
        
      },
  },
}));

export default function HorizontalNonLinearStepper() {
    const classes = useStyles();

    return (
        <Layout>
            <Head>
                <title key="title">Profil – Talents Tube</title>
                <meta key="robots" name="robots" content="noindex, nofollow"></meta>
            </Head>
            <div >

                <AdBlockDetect   > 
                  <div className={classes.information}>
                    
                      <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner
                          correctement, veuillez désactiver Ad Blocks</p>
                    
                  </div>
                </AdBlockDetect>
            </div>
            <div >
                <AccountProfile/>
            </div>

        </Layout>
    );
}
