import { Height, Padding } from '@mui/icons-material';
import { AppBar, Box, Button, Card, Grid, IconButton, Paper, Toolbar, Typography } from '@mui/material';
import { Link } from "react-router-dom";

export default function Header(){
    return(
        <>
        <Box sx={{ flexGrow: 1 }}>
          <AppBar position="static">
            <Toolbar>
              <IconButton
                size="large"
                edge="start"
                color="inherit"
                aria-label="menu"
                // sx={{ mr: 2 }}
                sx={{margin:"7px 0px 7px 0px", padding:0}}
              >   
             
                {/* <img width="60" height="50" style={{padding:0, margin:0}} rel="icon" src="https://www.sonymusic.com/wp-content/themes/sonymusic/images/logo_sonymusic_wht.png" /> */}
           
              </IconButton>
              
              <Button color="inherit" component={Link}
                to='/' sx={{marginLeft:'10px', fontSize:10}}>
                <Typography  component="div" sx={{ flexGrow: 1, fontSize:18 }}>
                  In Motion Spine & Joint Center
                </Typography>
              </Button>
            </Toolbar>
          </AppBar>
        </Box>
        </>
    )
}