import React from 'react';
import {
  BannerWrapper,
  InstructorContainer,
  NewLanguage,
  RecentAdded,
} from "../styles";
import UpgradeComponent from "../components/ugradeLock";
import LessonIcon from "../assets/lession";
import LessonFlag from "../assets/lessonflag";
import Ellipse from "../assets/Ellipse.png";
import Ellipse2 from "../assets/Ellipse2.png";
import Ellipse3 from "../assets/Ellipse3.png";
import Ellipse4 from "../assets/Ellipse4.png";
import SliderIcon from "../assets/slider";
import { Line } from "rc-progress";
import LibraryAdImage from "../assets/libraryAd.png";

/**
 * @param {{
 *  CourseClick: function,
 *  UpgradeClick: function,
 * }} props - properties of graph Component
 *
 */
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const PersonalRightBar = ({ personalReport, personalLibrary }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <InstructorContainer>
      {!personalReport && (
        <BannerWrapper>
          <div className="head_instructor head_enterprise">
            <h3>{findText("Recommended")}</h3>
          </div>
          <NewLanguage>
            <div className="top_section">
              <div className="lession_cont">
                <LessonIcon />
                <p>{findText("9 lessions")}</p>
              </div>
              <div className="flag_cont">
                <LessonFlag />
              </div>
            </div>

            <div className="buttom_section">
              <p>{findText("French for Beginners")}</p>
            </div>
          </NewLanguage>
          <SliderIcon />
        </BannerWrapper>
      )}
      {!personalReport && (
        <RecentAdded>
          <div className="top_area">
            <h5>{findText("Friends")}</h5>
            <p>{findText("See all")}</p>
          </div>
          <div className="users_list">
            <div className="user">
              <img src={Ellipse} alt={findText("user")} />
            </div>
            <div className="user">
              <img src={Ellipse2} alt={findText("user")} />
            </div>
            <div className="user">
              <img src={Ellipse3} alt={findText("user")} />
            </div>
            <div className="user">
              <img src={Ellipse4} alt={findText("user")} />
            </div>
          </div>
        </RecentAdded>
      )}
      {!personalLibrary && (
        <RecentAdded
          className={personalReport ? "courses personal_courses" : "courses"}
        >
          <div className="top_area">
            <h5>{findText("In Progress")}</h5>
            <p>{findText("See all")}</p>
          </div>
          <div className="course_list">
            <div className="course">
              <NewLanguage className="courses_personal">
                <h3>{findText("French for Beginners")}</h3>
                <div className="line">
                  <Line
                    percent={54}
                    strokeWidth={8}
                    trailWidth={8}
                    strokeColor="#FECF4C"
                  />
                  <span> {54}%</span>
                </div>
              </NewLanguage>
              <NewLanguage className="courses_personal">
                <h3>{findText("French for Beginners")}</h3>
                <div className="line">
                  <Line
                    percent={54}
                    strokeWidth={8}
                    trailWidth={8}
                    strokeColor="#FECF4C"
                  />
                  <span> {54}%</span>
                </div>
              </NewLanguage>
              <NewLanguage className="courses_personal">
                <h3>{findText("French for Beginners")}</h3>
                <div className="line">
                  <Line
                    percent={54}
                    strokeWidth={8}
                    trailWidth={8}
                    strokeColor="#FECF4C"
                  />
                  <span> {54}%</span>
                </div>
              </NewLanguage>
            </div>
          </div>
        </RecentAdded>
      )}
      {personalReport && <UpgradeComponent personal />}

      {personalLibrary && (
        <div className="library_img">
          <img src={LibraryAdImage} alt={findText("ad image")} />
        </div>
      )}
    </InstructorContainer>
  );
};
export default PersonalRightBar;
