import React from "react";
import { SettingButton } from "./settingButton";
import langIcon from './icons/languageIcon.svg';
import shareIcon from './icons/shareIcon.svg';
import pointerIcon from './icons/pointer2Icon.svg';
import exitIcon from './icons/exitIcon.svg';
import { LangButton } from "./langButton";

type TProps = {
    type: 'other' | 'selectLang'
    onClickShare?: () => void
    onClickChangeLang?: () => void
    onClickSelectLang?: () => void
    onClickExit?: () => void
}

export const SettingButtons:React.FC<TProps> = React.memo((props) => {
    return <div className="setting-buttons-container">
        <div className="setting-buttons-row">
            {
                props.type === 'other' ?
                <>
                    <SettingButton
                        text="Пригласить"
                        icon={shareIcon}
                        helpIcon={pointerIcon}
                        onClick={props.onClickShare}
                    />
                    <SettingButton
                        text="Язык"
                        helpText="Русский"
                        icon={langIcon}
                        helpIcon={pointerIcon}
                        onClick={props.onClickChangeLang}
                    />
                </>
                :
                <>
                    <LangButton 
                        title="Русский"
                        caption="Русский"
                        isSelected={true}
                        onClick={props.onClickSelectLang}
                    />
                    <LangButton 
                        title="English"
                        caption="Английский"
                        isSelected={false}
                        onClick={props.onClickSelectLang}
                    />
                </>
            }
        </div>
        {
            props.type === 'other' ?
            <SettingButton 
                text="Выйти"
                isExitButton={true}
                icon={exitIcon}
                onClick={props.onClickExit}
            />
            : null
        }
    </div>
})