import { View} from 'react-native';
import { useEffect, useState } from 'react'
import { Heading } from '@/components/ui/heading';
import { FlatList } from 'react-native';
import axios from 'axios';
import UserBlock from '@/components/UserBlock';
import {useAuthStore} from "@/store/authStore";


export function UserSection({notices, title}) {
 const token = useAuthStore((state) => state.token);
  const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
 const [users, setUsers] = useState([]);

  useEffect(() => {
    if (token){ 
    axios.get('https://testowe.zikor.pl/api/v1/clients/get/all', { headers })
      .then(res => setUsers(res.data))
      .catch(() => setUsers([]));
    }
  }, [token]);
    
 const usersWithNoticeCount = users.map(user => {
    const count = notices.filter(n => n.clientId === user.id).length;
    return { ...user, noticeCount: count };
  });

  const topUsers = usersWithNoticeCount
    .sort((a, b) => b.noticeCount - a.noticeCount)
    .slice(0, 5);

return (
    <View className="mb-6">
      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
      <FlatList
        data={topUsers}
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
        renderItem={({ item }) => {
          return (
            <UserBlock user={item} />
          );
        }}
      />
    </View>
  );

}