import React, { useContext } from "react";
import { LangDict } from "../langDict";
import { ContextLang } from "../ContextLang";

type TProps = {
    active: boolean
}

export const Legend:React.FC<TProps> = React.memo((props) => {
    const {lang} = useContext(ContextLang);
    return <div className="legend-container">
        <span className={`legend-circle ${props.active ? 'active' : 'disable'}`}></span>
        <span className={`legend-text ${props.active ? 'active' : 'disable'}`}>
            {
                props.active            
                ? LangDict.legendActive[lang]
                : LangDict.legendDisabled[lang]
            }
        </span>
    </div>
})