import React from 'react';

import PageTemplate from '@/templates/PageTemplate';
import ExpositoryItemCodeInput from '@/components/ExpositoryItemCodeInput';
import QrcodeScanner from '@/components/QrcodeScanner';
import { getDictionary } from '@/libraries/dictionary';
import { Locale, defaultLocale } from '@/i18n.config';

import styles from '@/sass/pages/CodeReaderPage.module.scss';

export default async function CodePage({
  params: { lang = defaultLocale },
}: {
  params: { lang?: Locale },
}) {
  const d = await getDictionary(lang);

  return (
    <PageTemplate navigationActive="code" lang={lang || 'pt'}>
      <main className={styles.CodePage}>
        <div className={styles.container}>
          <h1>{d.codePage.title}</h1>
          <ExpositoryItemCodeInput />
          <QrcodeScanner lang={lang} />
          <h2>{d.codePage.callToAction}</h2>
        </div>
      </main>
    </PageTemplate>
  );
};
