import React, { useState } from "react";
import whiteLogo from './logoWhiteIcon.svg';

export const MainPartHeader:React.FC = React.memo(() => {
    const [activeButton, setActiveButton] = useState<string>('ru');

    function onClickChangeLang(lang: string) {
        setActiveButton(lang);
    }

    return <div className="main-part-header">
        <img className="main-part-header-logo" alt="logo" src={whiteLogo} />
        <div className="main-part-header-lang">
            <span className={`main-part-header-lang-button ${activeButton === 'en' ? 'active' : null}`} onClick={() => onClickChangeLang('en')}>EN</span>
            <span className="main-part-header-lang-slash">/</span>
            <span className={`main-part-header-lang-button ${activeButton === 'ru' ? 'active' : null}`} onClick={() => onClickChangeLang('ru')}>RU</span>
        </div>
    </div>
})