import React from 'react';

import BasicPageTemplate from '@/templates/BasicPageTemplate';
import BasicCover from '@/components/BasicCover';
import HtmlContent from '@/components/HtmlContent';
import { getDictionary } from '@/libraries/dictionary';
import { AboutContentType, FileType } from '@/types';
import { Locale, defaultLocale } from '@/i18n.config';

import styles from '@/sass/pages/AboutPage.module.scss';
import Api from '@/api';

export default async function AboutPage({
  params: { lang = defaultLocale },
}: {
  params: { lang?: Locale };
}) {
  const d = await getDictionary(lang);
  const content: AboutContentType = await Api.about.getContent(lang);

  return (
    <BasicPageTemplate
      navigationActive="home"
      lang={lang || defaultLocale}
      title={d?.phrases?.aboutTheMuseum}
    >
      <main className={styles.AboutPage}>
        <div className={styles.container}>
          {!!content?.image && (
            <div className={styles['cover-wrapper']}>
              <BasicCover cover={content.image} />
            </div>
          )}
          {!!content?.text?.length && (
            <div className={styles['content-wrapper']}>
              <HtmlContent content={`${
                  content?.title?.length ? `## ${content.title}\n` : ''
                }${
                  content?.text
              }`} />
            </div>
          )}
        </div>
      </main>
    </BasicPageTemplate>
  );
};
