import PropTypes from 'prop-types'
import Container from '@mui/material/Container'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import Image from 'next/image'
import Link from 'next/link'

export default function Akey({logo}) {
  return (
    <Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 7}}>
      <Container align='center'>
        <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>

          <Typography sx={{fontWeight: 'bold', mr: 1}} variant='h6' component='h1'>
            OKI
          </Typography>

          <Image
            width={32}
            height={32}
            alt='OKI logo'
            src={logo}
            loading='eager'
          />
        </Box>
        <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
          PAWÒL-NU
        </Typography>
        <Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
          Paroles et traductions
        </Typography>
      </Container>
    </Box>
  )
}

Akey.propTypes = {
  logo: PropTypes.object.isRequired
}