import React from 'react';

import BasicPageTemplate from '@/templates/BasicPageTemplate';
import GlossaryItem from '@/components/GlossaryItem';
import { getDictionary } from '@/libraries/dictionary';
import { Locale, defaultLocale } from '@/i18n.config';

import styles from '@/sass/pages/GlossaryPage.module.scss';
import { GlossaryType } from '@/types';
import Api from '@/api';

export default async function AboutPage({
  params: { lang },
}: {
  params: { lang: Locale };
}) {
  const d = await getDictionary(lang);
  const glossaries: GlossaryType[] = await Api.glossary.getContent(lang);

  return (
    <BasicPageTemplate
      lang={lang || defaultLocale}
      navigationActive="home"
      title={d?.words?.glossary}
    >
      <main className={styles.GlossaryPage}>
        <div className={styles.container}>
          {!!glossaries?.length && (
            <ul className={styles.glossary}>
              {glossaries.map((glossary) => {
                if (
                  glossary?.id &&
                  glossary?.name?.length &&
                  glossary?.description?.length
                ) {
                  return (
                    <li key={glossary.id}>
                      <GlossaryItem
                        content={glossary.description}
                        title={glossary.name}
                      />
                    </li>
                  )
                }

                return null;
              })}
            </ul>
          )}
        </div>
      </main>
    </BasicPageTemplate>
  );
};
