import React, { useState } from "react";
import {
  BannerWrapper,
  InstructorContainer,
  NewLanguage,
  RecentAdded,
} from "./styles";
import Button from "../button";
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";

/**
 * @param {{
 *  onClick: function,
 * }} props - properties of graph Component
 *
 */
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const InstructorRightBar = ({ personal, onClick }) => {
  const { findText } = useTranslation(wordStore);
  // const [account, setAccount] = useState("instructor")

  return (
    <InstructorContainer>
      <BannerWrapper>
        <div className="head_instructor">
          {personal ? (
            <h3 className="personal_head">{findText("Recommended")}</h3>
          ) : (
            <h3>{findText("Learn a new language today")}</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 />
        {!personal && (
          <Button
            type="primary"
            text={findText("Create Personal Account")}
            styles={{
              marginTop: "29px",
              fontSize: "16px",
              width: "203px",
              gap: "8px",
              padding: "20px 6px",
              height: "40px",
              boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
            }}
            onClick={onClick}
          />
        )}
      </BannerWrapper>
      <RecentAdded className={personal ? "personal_added" : ""}>
        <div className="top_area">
          {personal ? (
            <h5>{findText("Friends")}</h5>
          ) : (
            <h5>{findText("Recently added")}</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>
      {personal ? <UpgradeComponent personal /> : <UpgradeComponent />}
    </InstructorContainer>
  );
};
export default InstructorRightBar;
