import React from 'react';

import PageTemplate from '@/templates/PageTemplate';
import BasicCover from '@/components/BasicCover';
import LinkItem from '@/components/LinkItem';
import RoomLinkItem from '@/components/RoomLinkItem';
import Api from '@/api';
import { getDictionary } from '@/libraries/dictionary';
import { Locale, defaultLocale } from '@/i18n.config';
import { AboutContentType, RoomType } from '@/types';

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

export default async function Home({
  params: { lang = defaultLocale },
}: {
  params: { lang: Locale };
}) {
  const d = await getDictionary(lang);
  const rooms: RoomType[] = await Api.rooms.getAll(lang) || [];
  const content: AboutContentType = await Api.about.getContent(lang);

  return (
    <PageTemplate navigationActive="home" lang={lang}>
      <main className={styles.Home}>
        <div className={styles.container}>
          {!!content?.image && (
            <div className={styles['cover-wrapper']}>
              <BasicCover cover={content.image} />
            </div>
          )}
          <ul className={styles['link-list']}>
            <li>
              <LinkItem
                lang={lang}
                path="/sobre"
                title={d.phrases.aboutTheMuseum}
              />
            </li>
            {!!rooms?.length && rooms?.map(
              (room: RoomType) => {
                if (!!room?.id && !!room) {
                  return (
                    <li key={room.id}>
                      <RoomLinkItem lang={lang} room={room}/>
                    </li>
                  )
                }
              }
            )}
            <li>
              <LinkItem
                lang={lang}
                path="/glossario"
                title={d.words.glossary}
              />
            </li>
          </ul>
        </div>
      </main>
    </PageTemplate>
  );
};
