Solved

components/PetItem.tsx

@@ -1,5 +1,5 @@
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 
 interface PetItemProps {
   pet: {
@@ -10,25 +10,31 @@ interface PetItemProps {
     image: string;
     image2: string;
   };
+  onAdopt: () => void;
 }
 
-const PetItem = ({ pet }: PetItemProps) => {
+const PetItem = ({ pet, onAdopt }: PetItemProps) => {
+  const [currentImage, setCurrentImage] = useState(pet.image);
+
   return (
     <View style={styles.container}>
       <View style={styles.petInfo}>
-        <Image source={{ uri: pet.image }} style={styles.image} />
+        <Image source={{ uri: currentImage }} style={styles.image} />
 
         <Text style={styles.name}>{pet.name}</Text>
 
         <Text style={styles.description}>{pet.description}</Text>
       </View>
 
       <View style={styles.buttonContainer}>
-        <TouchableOpacity style={styles.petButton}>
+        <TouchableOpacity
+          style={styles.petButton}
+          onPress={() => setCurrentImage(pet.image2)}
+        >
           <Text style={styles.buttonText}>Pet</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={styles.adoptButton}>
+        <TouchableOpacity style={styles.adoptButton} onPress={onAdopt}>
           <Text style={styles.buttonText}>Adopt</Text>
         </TouchableOpacity>
       </View>

components/PetList.tsx

@@ -10,33 +10,87 @@ import pets from "@/data/pets";
 import PetItem from "./PetItem";
 
 const PetList = () => {
-  const petList = pets.map((pet) => <PetItem key={pet.id} pet={pet} />);
+  const [query, setQuery] = useState("");
+  const [type, setType] = useState("All");
+  const [adoptedPets, setAdoptedPets] = useState<number[]>([]);
+
+  const handleAdopt = (petId: number) => {
+    setAdoptedPets([...adoptedPets, petId]);
+    console.log("Pet adopted:", petId);
+  };
+
+  // Filter pets based on search query, type, and adoption status
+  const filteredPets = pets
+    .filter(
+      (pet) =>
+        pet.name.toLowerCase().includes(query.toLowerCase()) &&
+        (type === "All" || pet.type === type) &&
+        !adoptedPets.includes(pet.id)
+    )
+    .map((pet) => (
+      <PetItem key={pet.id} pet={pet} onAdopt={() => handleAdopt(pet.id)} />
+    ));
+
   return (
     <ScrollView
       contentContainerStyle={styles.container}
       style={styles.containerStyle}
     >
       {/* Search Input */}
-      <TextInput placeholder="Search for a pet" style={styles.searchInput} />
+      <TextInput
+        placeholder="Search for a pet"
+        style={styles.searchInput}
+        onChangeText={(text) => {
+          setQuery(text);
+          console.log("Search query:", text);
+        }}
+      />
 
       {/* Filter by type */}
       <ScrollView horizontal contentContainerStyle={styles.filterContainer}>
-        <TouchableOpacity style={styles.filterButton}>
+        <TouchableOpacity
+          style={[styles.filterButton, type === "All" && styles.activeFilter]}
+          onPress={() => {
+            setType("All");
+            console.log("Selected type: All");
+          }}
+        >
           <Text>All</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.filterButton}>
+        <TouchableOpacity
+          style={[styles.filterButton, type === "Cat" && styles.activeFilter]}
+          onPress={() => {
+            setType("Cat");
+            console.log("Selected type: Cat");
+          }}
+        >
           <Text>Cat</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.filterButton}>
+        <TouchableOpacity
+          style={[styles.filterButton, type === "Dog" && styles.activeFilter]}
+          onPress={() => {
+            setType("Dog");
+            console.log("Selected type: Dog");
+          }}
+        >
           <Text>Dog</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.filterButton}>
+        <TouchableOpacity
+          style={[
+            styles.filterButton,
+            type === "Rabbit" && styles.activeFilter,
+          ]}
+          onPress={() => {
+            setType("Rabbit");
+            console.log("Selected type: Rabbit");
+          }}
+        >
           <Text>Rabbit</Text>
         </TouchableOpacity>
       </ScrollView>
 
       {/* Pet List */}
-      {petList}
+      {filteredPets}
     </ScrollView>
   );
 };
@@ -74,14 +128,19 @@ const styles = StyleSheet.create({
     alignItems: "center",
     width: "100%",
     marginBottom: 10,
+    gap: 10,
   },
   filterButton: {
     backgroundColor: "#fff",
     borderWidth: 1,
     borderRadius: 10,
     padding: 10,
-    width: "20%",
+    width: 80,
     justifyContent: "center",
     alignItems: "center",
   },
+  activeFilter: {
+    backgroundColor: "#4ade80",
+    borderColor: "#4ade80",
+  },
 });