import React, { FC, Suspense } from 'react';
import { HeaderMenu } from './HeaderMenu';
import { LanguageSwitcher } from './LanguageSwitcher';
import { HeaderMobileMenu } from './HeaderMobileMenu';
import { HEAD_ROUTES } from '../../../constants/routes';
import { Link } from '../../../i18n/routing';
import { i18nText } from '../../../i18nKeys';

type HeaderProps = {
    locale: string;
};

export const Header: FC<HeaderProps> = ({ locale }) => {
    const routes: { path: string, title: string }[] = HEAD_ROUTES.map((item) => ({
        path: item,
        title: i18nText(item ? `menu.${item}` : 'menu.home', locale)
    }));

    return (
        <>
            <header className="b-header">
                <div className="b-inner">
                    <Link href={'/' as any} className="b-header__logo">
                        <img
                            src="/images/logo-header.svg"
                            className="img-default"
                            alt=""
                        />
                    </Link>
                    <Suspense fallback={null}>
                        <HeaderMenu
                            locale={locale}
                            linkConfig={routes}
                        />
                        <LanguageSwitcher locale={locale} />
                    </Suspense>
                </div>
            </header>
            <Suspense fallback={null}>
                <HeaderMobileMenu
                    locale={locale}
                    linkConfig={routes}
                />
            </Suspense>
        </>
    );
};