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

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

const Hero = () => {
  const { t } = useTranslation('home')

  return (
    <Box
      sx={{
        py: 12,
        textAlign: 'center'
      }}
    >
      <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>
  )
}

export default Hero