import React, { FC } from 'react';
import { useTranslations } from 'next-intl';
import { HeaderMenu } from './HeaderMenu';
import { LanguageSwitcher } from './LanguageSwitcher';
import { HeaderMobileMenu } from './HeaderMobileMenu';
import { HEAD_ROUTES } from '../../../constants/routes';
import { Link } from '../../../navigation';

type HeaderProps = {
    locale: string;
};

export const Header: FC<HeaderProps> = ({ locale }) => {
    const t = useTranslations('Header');

    const routes = HEAD_ROUTES.map((item) => (
        <li key={item}>
            <Link href={`/${item}` as any}>{t(`menu.${item}`)}</Link>
        </li>
    ));

    return (
        <>
            <header className="b-header">
                <div className="b-inner">
                    <div className="b-header__logo">
                        <img
                            src="/images/logo-header.svg"
                            className="img-default"
                            alt=""
                        />
                    </div>
                    <HeaderMenu>
                        {routes}
                    </HeaderMenu>
                    <LanguageSwitcher locale={locale} />
                </div>
            </header>
            <HeaderMobileMenu>
                {routes}
            </HeaderMobileMenu>
        </>
    );
};
