import React, { useState } from "react";
import { useModalState } from "../../zustand/Modal";
import { ModalEnum } from "../../enums/Model";
import { FaMoneyBill } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";

const DivisionsHeaderSection = () => {
  const [showAll, setShowAll] = useState<boolean>(false);

  const toggleShowAll = () => {
    setShowAll(!showAll);
  };

  const { isOpen, setIsOpen } = useModalState((state) => state);

  const handelOpenModal = () => {
    setIsOpen(ModalEnum?.DIVISION_ADD);
  };

  // Define the interface for your data
  interface Item {
    icon: JSX.Element;
    name: string;
  }
  const data: Item[] = [
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
    { icon: <FaMoneyBill />, name: "الطالبات" },
  ];

  return (
    <div className="Divisions_header_section">
      <div className="CountCards">
        {data?.map((item: Item, index: number) => {
          return (
            <div
              key={index}
              className={`CountCard ${!showAll && index >= 5 ? "hidden" : ""}`}
            >
              <i>{item?.icon}</i>
              <h4>{item?.name}</h4>
            </div>
          );
        })}
      </div>
      {showAll ? (
        <span className="Show_More_Button" onClick={toggleShowAll}>
          <IoMdArrowDropup />
        </span>
      ) : (
        <span className="Show_More_Button" onClick={toggleShowAll}>
          <IoMdArrowDropdown />
        </span>
      )}
      <button className="Add_button" onClick={handelOpenModal}>
        إضافة مادة
      </button>
    </div>
  );
};

export default DivisionsHeaderSection;