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 {useRouter} from "next/router";
import Menu from "../../Component/Menu/Menu";
import dynamic from "next/dynamic";
const QrReader : any = dynamic(() => import('react-qr-reader'),{ ssr: false })


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

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

    const previewStyle = {
        height: "100vw",
        width: "100vw",
        maxWidth: 500,
        maxHeight: 500
    }

    const handleScan = (data) => {
        if (data) {
            router.push(data)
        }
    }


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

      <main className={styles.main}>
          {process.browser && QrReader &&
          <QrReader
              style={previewStyle}
              facingMode='environment'
              // onError={handleError}
              onScan={handleScan}
          />}
      </main>
        <Menu  />

    </Container>
  )
}