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

function Title({ selectedTag, onTagChange, cityId }) {
  const [tags, setTags] = useState([]);

  useEffect(() => {
    const fetchTags = async () => {
      try {
        // واژگان کامل تگ‌های مقالات منتشرشده در scope همین دامنه. استخراج از خودِ
        // لیست مقاله‌ها ممکن نیست: سقف limit برابر ۵۰ است و مقاله‌ها بیشترند.
        const response = await request.getBlogTagFacets(
          cityId ? { city_id: cityId } : {}
        );
        setTags(response?.data || []);
      } catch (error) {
        console.error("Error fetching blog tags:", error);
        setTags([]);
      }
    };

    fetchTags();
  }, [cityId]);

  if (tags.length === 0) return null;

  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
        name="همه"
        isActive={!selectedTag}
        onSelect={() => onTagChange(null)}
        key="all"
      />
      {tags.map((tag) => (
        <ItemTitle
          name={tag.name}
          isActive={selectedTag === tag.name}
          onSelect={() => onTagChange(tag.name)}
          key={tag.name}
        />
      ))}
    </ul>
  );
}

export default Title;