import React from 'react';
import { notFound } from 'next/navigation';

import PageTemplate from '@/templates/PageTemplate';
import MapPageHeader from '@/sections/MapPageHeader';
import Map from '@/components/Map';
import { getDictionary } from '@/libraries/dictionary';
import { FLOOR_1, FLOOR_LIST, GROUND_FLOOR } from '@/constants';
import { FloorKeyType, RoomContentType } from '@/types';
import { Locale, defaultLocale } from '@/i18n.config';

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

export default async function MapPage({
  params: { floor = GROUND_FLOOR, lang },
}: {
  params: { floor: FloorKeyType, lang: Locale };
}) {
  if (!FLOOR_LIST.includes(floor)) {
    return notFound();
  }

  const d = await getDictionary(lang);

  const mapContent = d.placeholder.mapContent as RoomContentType[];

  return (
    <PageTemplate navigationActive="map" lang={lang || defaultLocale}>
      <main className={styles.MapPage}>
        <div className={styles.container}>
          <MapPageHeader
            floor={floor}
            lang={lang || defaultLocale}
            options={[
              {
                name: d.words.groundFloor,
                value: GROUND_FLOOR,
              }, {
                name: d.words.floor1,
                value: FLOOR_1,
              },
            ]}
          />
          <div className={styles['map-wrapper']}>
            <Map content={mapContent} floor={floor} lang={lang} />
          </div>
        </div>
      </main>
    </PageTemplate>
  );
};
