import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import Title from '../Title'
import routes from '../../routes'
import styles from './styles.module.css'

function FreePeriodInfoPage(): JSX.Element {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const handleNext = () => navigate(routes.client.createProfile())

  return (
    <section className={`${styles.page} page`} onClick={handleNext}>
      <div className={styles.content}>
        <Title variant='h4' style={{color: 'white', fontWeight: 500}}>{t('free_period_info')}</Title>
      </div>
      {/* <img src="/goosebumps-aura.png" alt="Aura" /> */}
    </section>
  )
}

export default FreePeriodInfoPage