import React, { useContext, useEffect } from "react";
import { ContextLang } from "../ContextLang";
import { PinkButton } from "./pinkButton";

type TProps = {
    textButton: {
        ru: string,
        en: string
    }
    onClickButton: () => void
    titleText?: {
        ru: string,
        en: string
    }
    descriptText: {
        ru: string,
        en: string
    }
    accessCode?: string,
}

export const ContentContainer:React.FC<TProps> = React.memo((props) => {
    let {lang} = useContext(ContextLang);
    
    return <div className="main-part-text-container">
        {
            props.titleText && 
            <span className="main-part-text-title">
                {props.titleText[lang]}
            </span>
        }        
        <span className="main-part-text-descript">
            {props.descriptText[lang]}
        </span>
        {
            props.accessCode &&
            <span className="main-part-text-access-code">{props.accessCode}</span>
        }
        <PinkButton
            onClick={props.onClickButton}
            textButton={props.textButton[lang]}
        />
    </div>
})