import { View, FlatList } from "react-native";
import { useEffect, useState } from "react";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import { Link } from "expo-router";
import { Pressable } from "@/components/ui/pressable";
import { listCategories } from "@/api/categories";

export function CategorySection({ notices, title }) {
  const [categoryMap, setCategoryMap] = useState({});

  useEffect(() => {
    const fetchCategories = async () => {
      let data = await listCategories();
      if (Array.isArray(data)) {
        setCategoryMap(data);
      }
    };
    fetchCategories();
  }, []);

  const categories = Array.from(
    new Set(notices.map((notice) => notice.category))
  ).filter(Boolean);

  const getCount = (category) =>
    notices.filter((notice) => notice.category === category).length;

  if (!categoryMap || Object.keys(categoryMap).length === 0) {
    return null;
  }

  return (
    <View className="mb-6">
      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
      <FlatList
        data={categories}
        keyExtractor={(item) => item}
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
        renderItem={({ item }) => {
          const categoryObj = categoryMap.find((cat) => cat.value === item);
          return (
            <Link href={`/notices?category=${item}`} asChild>
              <Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
                <Text>
                  {categoryObj ? categoryObj.label : item} ({getCount(item)})
                </Text>
              </Pressable>
            </Link>
          );
        }}
      />
    </View>
  );
}