import { Stack, Typography } from '@mui/material'
import { useCustomTheme } from '@/themes/useCustomTheme'

const What = () => {
  const theme = useCustomTheme();
  return (
    <Stack
      sx={{
        px: theme.customProperties.sectionPaddingX,
        mb: '50px',
        minHeight: '100vh'
      }}
      justifyContent={{xs: 'center', md: 'space-between'}} 
      direction={{xs: 'column', md: 'row'}}
      alignItems={'center'}
    > 
        <Typography variant='h2'>What is Super Fit?</Typography>
        <Typography 
          sx={{
            maxWidth: '600px',
            textAlign: 'justify'
          }}
        >
          Super fit is here to give you the tools, support and accountability to make things happen. We want to see you succeed in all areas of your life, starting with the gym.
        </Typography>
    </Stack>
  )
}

export default What