import { Box, Chip } from '@mui/material'
import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { useState } from 'react'

import logo from './assets/warframe_logo.png'
import HelpModal from './HelpModal'

const Hero = () => {
  const { t } = useTranslation('home')
  const [modalOpen, setModalOpen] = useState(false)

  const openModal = () => {
    setModalOpen(true)
  }

  const closeModal = () => {
    setModalOpen(false)
  }

  return (
    <>
      <Box
        sx={{
          py: 12,
          textAlign: 'center'
        }}
      >
        <Chip
          label={t('help_header')}
          variant='outlined'
          onClick={openModal}
          sx={{
            position: 'absolute',
            top: '10px',
            right: '10px'
          }}
        />

        <Box
          sx={{
            width: 400,
            m: 'auto'
          }}
        >
          <Image
            src={logo}
            alt='logo'
            layout='responsive'
            width={500}
            height={300}
          />
        </Box>
        <Box
          sx={{
            width: 400,
            m: 'auto'
          }}
        >
          <h1>Market Gaps</h1>
          <p>{t('description')}</p>
        </Box>
      </Box>

      <HelpModal
        open={modalOpen}
        onClose={closeModal}
      />
    </>
  )
}

export default Hero