import React from 'react';

import { useTranslations } from 'next-intl';

import style from './Menu.module.scss'

import Theme from './Theme';
import Repo from './Repo';
import Language from './Language';
import { LangOption } from '@/meta/settings';
import Settings from './Settings';
import { getEnabledPlatforms } from '@/utils/platforms';

const Menu: React.FC = () => {

    const t = useTranslations('Settings');

    const options: LangOption[] = [
        { label: t('lang_en'), code: "en" },
        { label: t('lang_it'), code: "it" },
      ];
    
    const languageLabels = {
        title: t('lang_title'),
        langs: options
    }

    const settingsLabels = {
        title: t('settings_title'),
        platform: {
            title: t('platform_title')
        },
        orientation: {
            title: t('orientation_title')
        }
    }

    const enabledPlatforms = getEnabledPlatforms()

    return (
        <div className={style.container}>
            <Repo />
            <Language labels={languageLabels} />
            <Theme />
            <Settings enabledPlatforms={enabledPlatforms} labels={settingsLabels} />
        </div>
    );
};

export default Menu;