import {useState} from 'react'
import {Box, Button, Typography} from '@material-ui/core'
import Image from 'next/image'

import SesyonDialog from './sesyon-dialog'

export default function JwennSesyon() {
  const [ouve, meteOuve] = useState(false)

  const handleClickOuve = () => {
    meteOuve(true)
  }

  const handleFemen = () => {
    meteOuve(false)
  }

  return (
    <>
      <Button style={{marginTop: 10}} variant='outlined' color='primary' onClick={handleClickOuve}>
        <Box paddingTop={1}>
          <Image
            src='/session-logo-50.png'
            width={50}
            height={55}
          />
          <Typography style={{fontWeight: 'bold'}} variant='h6' component='h1'>
            Session
          </Typography>
        </Box>
      </Button>
      {ouve && (
        <SesyonDialog ouve={ouve} handleFemen={handleFemen} />
      )}
    </>
  )
}