import React, { useState } from "react";
import { FaArrowRight, FaPlus } from "react-icons/fa";
import { useButtonState } from "../../../zustand/ButtonState";
import { usePage_titleState } from "../../../zustand/PageTitleState";

const FillterNavWithRadio = () => {
  const [activeButton, setActiveButton] = useState(0);
  const { setActiveTab } = useButtonState((state) => state);
  const { title } = usePage_titleState();

  // Function to handle button click
  const handleButtonClick = (index: number) => {
    setActiveButton(index);
    setActiveTab(index);
  };

  const buttonLabels = ["الفهرس", "الملحقات"];

  return (
    <div className="FillterNavWithRadio">
      <header>
        <FaArrowRight /> <span> {title} </span>
      </header>
      <span>
        <div className="ButtonTabs">
          {buttonLabels.map((label, index) => (
            <button
              key={index}
              className={activeButton === index ? "Activebutton" : "button"}
              onClick={() => handleButtonClick(index)}
            >
              {label}
            </button>
          ))}
        </div>
      </span>
    </div>
  );
};

export default FillterNavWithRadio;
