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/Unstable_Grid2'
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: 3}}>
      <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}
          />
        </Box>
        <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
          ORGANISATION KA INTERNATIONALE
        </Typography>
        <Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
          Paroles et traductions
        </Typography>
      </Container>
      <Container sx={{marginTop: 2}}>
        <Grid container justifyContent='center' spacing={2}>
          <Grid>
            <Link passHref href='/pwopose'>
              <Button color='primary' variant='outlined'>
                <strong>Proposer des paroles</strong>
              </Button>
            </Link>
          </Grid>
        </Grid>
      </Container>
    </Box>
  )
}

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