import React, { useContext } from "react";
import { ContextLang } from "../ContextLang";
import { Legend } from "./legend";

type TProps = {
    title: {
        ru: string,
        en: string
    }
    date?: {
        ru: string,
        en: string
    }
    content: JSX.Element
    isLegend: boolean
}

export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
    const {lang} = useContext(ContextLang);
    return <div className="plan-content-container">
        <span className="plan-content-title">{props.title[lang]}</span>
        {
            props.date
            ? <span className="plan-content-date">{props.date[lang]}</span>
            : null
        }
        <div className="plan-content-content">
            {props.content}
        </div>        
        {
            props.isLegend 
            ? <div className="plan-content-legend">
                <Legend active={true} />
                <Legend active={false} />
            </div>
            : null
        }
    </div>
})