import { Progress, Select } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { FaLaptop } from "react-icons/fa";
import { IoMdArrowDropdown } from "react-icons/io";
import Image from "../Ui/Image";

const StudentSubjects = () => {
  const [selectedOption, setSelectedOption] = useState("هذا الأسبوع");
  const Options = [
    { value: "هذا الأسبوع", label: "هذا الأسبوع" },
    { value: "الأسبوع الماضي", label: "الأسبوع الماضي" },
    { value: "الشهر الماضي", label: "الشهر الماضي" },
  ];

  const handleChangeSelect = (value: any) => {
    setSelectedOption(value);
    // console.log(`Selected ${value}`);
  };

  const [t] = useTranslation();

  // Define static data
  const staticData = [
    {
      SubjectImage: "/Subject/algebra.png",
      SubjectName: "طالبات",
      StudentSubjectsPercent: 50,
    },
    {
      SubjectImage: "/Subject/flask.png",
      SubjectName: "طالبات",
      StudentSubjectsPercent: 60,
    },
    {
      SubjectImage: "/Subject/koran.png",
      SubjectName: "طالبات",
      StudentSubjectsPercent: 70,
    },
  ];

  return (
    <div className="StudentSubjects">
      <header>
        <h6>{t("عدد الطالبات")}</h6>
        <Select
          defaultValue={selectedOption}
          onChange={handleChangeSelect}
          suffixIcon={<IoMdArrowDropdown size={30} />}
          options={Options}
        />
      </header>
      <main>
        {staticData.map((item, index) => (
          <div key={index}>
            <Progress
              type="circle"
              size={"small"}
              strokeColor={"#0052B4"}
              strokeWidth={7}
              percent={item?.StudentSubjectsPercent}
            />
            <h6>{item.SubjectName}</h6>
            <Image src={item?.SubjectImage} />
          </div>
        ))}
      </main>
    </div>
  );
};

export default StudentSubjects;
