import { useWishlist } from "@/store/wishlistStore";
import { FlatList } from "react-native";
import { NoticeCard } from "@/components/NoticeCard";
import { Ionicons } from "@expo/vector-icons";
import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
import { useEffect } from "react";

export default function Wishlist() {
  const wishlistNotices = useWishlist((state) => state.wishlistNotices);
  const fetchWishlist = useWishlist((state) => state.fetchWishlist);

  useEffect(() => {
    fetchWishlist();
  }, []);

  // console.log("Wishlist notices:", wishlistNotices);
  if (wishlistNotices.length === 0) {
    return (
      <Box className="flex-row flex-1 justify-center">
        <Ionicons name="sad-outline" size={24} color="black" />
        <Text>Brak ulubionych ogłoszeń</Text>
      </Box>
    );
  }
  return (
    <FlatList
      data={wishlistNotices}
      key={2}
      numColumns={2}
      columnContainerClassName="m-2"
      columnWrapperClassName="gap-2 m-2"
      k
      renderItem={({ item }) => <NoticeCard notice={item} />}
    />
  );
}