import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import { Link } from 'react-router-dom'
import BackHandIcon from '@mui/icons-material/BackHand'

export default function SelectDifficultyPage() {
  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        textAlign: 'center',
      }}
    >
      <Box>
        <Typography
          variant='h6'
          component='div'
          fontWeight={600}
          fontSize={35}
          mt={7}
          mb={5}
          letterSpacing={0.5}
          sx={{ color: '#555555' }}
        >
          Select a difficulty...
        </Typography>
      </Box>
      <Box sx={{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
        <Box
          component={Link}
          to={'/resources/' + 'Beginner'}
          sx={{
            width: '280px',
            display: 'flex',
            flexDirection: 'column',
            border: 0.1,
            borderBlockColor: '#555555',
            justifyContent: 'center',
            borderRadius: 1,
            textAlign: 'center',
            textDecoration: 'none',
            ':hover': {
              backgroundColor: '#5a2ce6',
              color: '#ffffff',
              '#box': {
                color: '#ffffff!important',
              },
              '& svg': {
                color: '#ffffff!important',
              },
            },
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'row',
              mt: 1,
              width: '100%',
              justifyContent: 'center',
            }}
          >
            <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
          </Box>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={30}
            mt={1}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Beginner
          </Typography>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mt={2}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Know little or no SSL
          </Typography>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mb={10}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Learn basic SSL
          </Typography>
        </Box>
        <Box
          component={Link}
          to={'/resources/' + 'Intermediate'}
          sx={{
            width: '280px',
            ml: 5,
            mr: 5,
            display: 'flex',
            flexDirection: 'column',
            border: 0.1,
            borderBlockColor: '#555555',
            justifyContent: 'center',
            borderRadius: 1,
            textAlign: 'center',
            textDecoration: 'none',
            ':hover': {
              backgroundColor: '#5a2ce6',
              color: '#ffffff',
              '#box': {
                color: '#ffffff!important',
              },
              '& svg': {
                color: '#ffffff!important',
              },
            },
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'row',
              mt: 5,
              width: '100%',
              justifyContent: 'center',
            }}
          >
            <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
            <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
          </Box>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={30}
            mt={1}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Intermediate
          </Typography>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mt={2}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Know baic SSL
          </Typography>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mb={10}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Improve vocabulary & comprehesion skills
          </Typography>
        </Box>
        <Box
          component={Link}
          to={'/resources/' + 'Advanced'}
          sx={{
            width: '280px',
            display: 'flex',
            flexDirection: 'column',
            border: 0.1,
            borderBlockColor: '#555555',
            justifyContent: 'center',
            borderRadius: 1,
            textAlign: 'center',
            textDecoration: 'none',
            ':hover': {
              backgroundColor: '#5a2ce6',
              color: '#ffffff',
              '#box': {
                color: '#ffffff!important',
              },
              '& svg': {
                color: '#ffffff!important',
              },
            },
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'row',
              mt: 5,
              width: '100%',
              justifyContent: 'center',
            }}
          >
            <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
            <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
            <BackHandIcon style={{ color: '#7950F1', fontSize: 40 }} />
          </Box>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={30}
            mt={1}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Advanced
          </Typography>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mt={2}
            letterSpacing={0.5}
            sx={{ color: '#555555' }}
          >
            Can converse in SSL
          </Typography>
          <Typography
            id='box'
            variant='h6'
            component='div'
            fontWeight={500}
            fontSize={20}
            mb={10}
            letterSpacing={0.5}
            sx={{ color: '#555555', pl: 2, pr: 2 }}
          >
            Master advanced aspects of SSL
          </Typography>
        </Box>
      </Box>
    </Box>
  )
}
