'use client'

import React, { FC, ReactNode, useState } from 'react';
import { HeaderAuthLinks } from './HeaderAuthLinks';

type HeaderMenuMobileProps = {
    children: ReactNode;
    enterTitle: string;
    registerTitle: string;
};

export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({ children, enterTitle, registerTitle }) => {
    const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);

    return (
        <>
            <div className="b-header__menu-open" onClick={() => setShowMobileMenu(!showMobileMenu)}>
                <img
                    src="/images/menu-open.svg"
                    className="img-default"
                    alt=""
                />
            </div>
            {showMobileMenu ? (
                <div className="menu-mobile">
                    <div className="menu-mobile__inner">
                        <div className="menu-mobile__header">
                            <div className="menu-mobile__header__avatar">
                                <img className="img-default" src="/images/avatar.png" alt=""/>
                            </div>
                            <ul className="menu-mobile__header__nav">
                                <HeaderAuthLinks
                                    separatorClass="menu-mobile__header__nav__line"
                                    enterTitle={enterTitle}
                                    registerTitle={registerTitle}
                                />
                            </ul>
                        </div>
                        <div className="menu-mobile__body">
                            <ul className="menu-mobile__list">
                                {children}
                            </ul>
                        </div>
                    </div>
                </div>
            ) : null}
        </>
    );
};