import { Box } from "@/components/ui/box";
import { Card } from "@/components/ui/card";
import { Heading } from "@/components/ui/heading";
import { Image } from "@/components/ui/image";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { Link } from "expo-router";
import { Pressable } from "react-native";
import { useWishlist } from "@/store/wishlistStore";
import { Ionicons } from "@expo/vector-icons";

export function NoticeCard({ notice }) {
  const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
  const removeNoticeFromWishlist = useWishlist(
    (state) => state.removeNoticeFromWishlist
  );
  const isInWishlist = useWishlist((state) =>
    state.wishlistNotices.some((item) => item.noticeId == notice.noticeId)
  );

  return (
    <Link href={`/notice/${notice.noticeId}`} asChild>
      <Pressable className="flex-1">
        <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
          <Image
            source={{
              uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
            }}
            className=" h-auto w-full rounded-md aspect-[1/1]"
            alt="image"
            resizeMode="cover"
          />
          <VStack className="p-2">
            <Text className="text-sm font-normal mb-2 text-typography-700">
              {notice.title}
            </Text>
            <Box className="flex-row items-center">
              <Heading size="md" className="flex-1">
                {notice.price}zł
              </Heading>
              <Pressable
                onPress={() => {
                  if (isInWishlist) {
                    removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
                  } else {
                    addNoticeToWishlist(notice); // Dodaj do ulubionych
                  }
                }}
              >
                <Ionicons
                  name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
                  size={24} // Rozmiar ikony
                  color={"primary-heading-500"} // Kolor ikony
                />
              </Pressable>
            </Box>
          </VStack>
        </Card>
      </Pressable>
    </Link>
  );
}