"use client";
import { useState, useEffect } from "react";
import ItemTitle from "./ItemTitle";
import { request } from "@/services/response";

function Title({ onTagChange }) {
  const [activeBtn, setActiveBtn] = useState(0);
  const [tags, setTags] = useState([]);

  useEffect(() => {
    const fetchTags = async () => {
      try {
        const params = {
          page: 1,
          limit: 100,
        };
        const response = await request.getBlogTags(params);
        setTags(response?.data?.data || []);
      } catch (error) {
        console.error("Error fetching tags:", error);
        setTags([]);
      }
    };

    fetchTags();
  }, []);

  const handleTagClick = (idx, tagId) => {
    setActiveBtn(idx);
    if (onTagChange) {
      onTagChange(tagId);
    }
  };

  return (
    <ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
      <ItemTitle
        setActiveBtn={() => handleTagClick(0, null)}
        activeBtn={activeBtn}
        name="همه"
        idx={0}
        key="all"
      />
      {tags.map((tag, idx) => (
        <ItemTitle
          setActiveBtn={() => handleTagClick(idx + 1, tag.id)}
          activeBtn={activeBtn}
          name={tag.name}
          idx={idx + 1}
          key={tag.uuid}
        />
      ))}
    </ul>
  );
}

export default Title;