'use client';

import React from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import { Link } from '../../../navigation';
import { HeaderAuthLinks } from './HeaderAuthLinks';

type HeaderMenuProps = {
    locale: string;
    linkConfig: { path: string, title: string }[];
};

export const HeaderMenu = ({
    locale,
    linkConfig
}: HeaderMenuProps) => {
    const selectedLayoutSegment = useSelectedLayoutSegment();
    const pathname = selectedLayoutSegment || '';

    return (
        <div className="b-header__nav">
            <nav>
                <ul className="b-header__nav__list">
                    {linkConfig.map(({ path, title }) => (
                        <li key={path}>
                            <Link href={`/${path}` as any} className={pathname === path ? 'active' : ''}>{title}</Link>
                        </li>
                    ))}
                    <HeaderAuthLinks locale={locale} />
                </ul>
            </nav>
        </div>
    );
}