import { 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";

const StudentCount = () => {
  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 = [
    { studentName: "طالبات الشعبة الأولى 1", studentCount: 50 },
    { studentName: "طالبات الشعبة الأولى 2", studentCount: 60 },
    { studentName: "طالبات الشعبة الأولى 3", studentCount: 70 },
    { studentName: "طالبات الشعبة الأولى 4", studentCount: 80 },
  ];

  return (
    <div className="StudentCount">
      <header>
        <h6>{t("عدد الطالبات")}</h6>
        <Select
          defaultValue={selectedOption}
          onChange={handleChangeSelect}
          suffixIcon={<IoMdArrowDropdown size={30} />}
          options={Options}
        />
      </header>
      <main>
        {staticData.map((item, index) => (
          <div key={index}>
            <span>
              <h6>{item.studentName}</h6>
              <p>{item.studentCount} طالب</p>
            </span>
            <FaLaptop />
          </div>
        ))}
      </main>
    </div>
  );
};

export default StudentCount;
