import { View} from 'react-native';
import { useEffect, useState } from 'react'
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
// import { useNoticesStore } from '@/store/noticesStore';
import { Pressable } from '@/components/ui/pressable';
import { FlatList } from 'react-native';
import axios from 'axios';

export function CategorySection({notices, title}) {
// const notices = useNoticesStore((state) => state.notices);

  const [categoryMap, setCategoryMap] = useState({});

  useEffect(() => {
    axios.get('https://testowe.zikor.pl/api/v1/vars/categories')
      .then(res => setCategoryMap(res.data))
      .catch(() => setCategoryMap({}));
  }, []);
    
const categories = Array.from(
  new Set(notices.map((notice) => notice.category))
).filter(Boolean);


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

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 (
            <Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
              <Text>
                {categoryObj ? categoryObj.label : item} ({getCount(item)})
              </Text>
            </Pressable>
          );
        }}
      />
    </View>
  );

}