import React from 'react'
import { Stack, Box, Typography } from '@mui/material'
import Link from 'next/link'

export default function LogoAndName() {
  return (
    <Link href='/'>
      <Stack direction={'row'} alignItems={'center'}>
        <Box 
          component='img'
          src='/logo.png'
          sx={{ height: { xs: '40px', md: '60px' } }}
        />
        <Typography sx={{ flexGrow: 1, fontSize: '28px', fontWeight: 700, ml: '10px'}}>Super Fit</Typography>
      </Stack>
    </Link>
  )
}