import { useState, useEffect } from "react";
import { BlogCategoryButtons } from "@/public/data/blog-category";

const PostFilterButtons = ({ handleClick, active }: any) => {
  const [categories, setCategories] = useState(BlogCategoryButtons);

  // TODO: Replace with API call to get blog categories
  // useEffect(() => {
  //   const fetchCategories = async () => {
  //     try {
  //       const response = await blogCategoryAPI.getAll();
  //       if (response.success) {
  //         setCategories(response.data);
  //       }
  //     } catch (error) {
  //       console.error('Error fetching categories:', error);
  //     }
  //   };
  //   fetchCategories();
  // }, []);

  return (
    <div className="row">
      <div className="col-12">
        <div className="post-filter__wrapper mt-80">
          {categories.map((item) => {
            return (
              <button
                aria-label="Filter Post"
                key={item.id}
                className={active === item.slug ? " active" : ""}
                onClick={() => handleClick(item.slug)}
              >
                {item.title}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default PostFilterButtons;
