import styles from '../../styles/Parcourir.module.css'
import Header from "../../Component/Page/Header";
import Container from "../../Component/Page/Container";
import useTranslation from "next-translate/useTranslation";
import TextContainerWithBorder from "../../Component/TextContainerWithBorder/TextContainerWithBorder";
import {useRouter} from "next/router";
import Separator from "../../Component/Separator/Separator";
import Menu from "../../Component/Menu/Menu";

export default function Index() {
    const { t } = useTranslation('common')
    const router = useRouter()

    const navigateTo = (path: string) => {
        router.push(path)
    }

  return (
    <Container className={styles.container}>
        <Header  title={"MENU_INFO"} />

      <main className={styles.main} style={{marginTop: -50}}>
          <TextContainerWithBorder>
<>

    <div className={styles.menu} onClick={() => navigateTo('/info/book')} >{t('MENU_INTERACTIVE_BOOK')}</div>

    <Separator />
    <div className={styles.menu} onClick={() => navigateTo('/info/download')} >{t('MENU_SHARE')}</div>
    <Separator />
        <div className={styles.menu} onClick={() => navigateTo('/info/credit')}  >{t('MENU_GENERIC')}</div>

</>
          </TextContainerWithBorder>
      </main>
        <Menu  />

    </Container>
  )
}