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

type TProps = {
    changeLang: (lang: 'ru' | 'en') => void
    onClickLogo: () => void
}

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

    function onClickChangeLang(lang: 'ru' | 'en') {
        setActiveButton(lang);
        props.changeLang(lang);
    }

    return <div className="main-part-header">
        <img className="main-part-header-logo" alt="logo" src={whiteLogo} onClick={() => props.onClickLogo()}/>
        <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>
})