Merge branch 'main' of https://github.com/Sosokker/chefhai

app/food/[id].tsx

@@ -1,43 +1,32 @@
-"use client";
-
-import { IconSymbol } from "@/components/ui/IconSymbol";
-import {
-  getFoodById,
-  getIngredients,
-  getNutrients,
-} from "@/services/data/foods";
-import { supabase } from "@/services/supabase";
-import { Foods } from "@/types";
-import { Ingredient, Nutrient } from "@/types/index";
-import { Feather } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import {
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+"use client"
+import { getFoodById, getIngredients, getNutrients } from "@/services/data/foods"
+import { supabase } from "@/services/supabase"
+import type { Foods } from "@/types"
+import type { Ingredient, Nutrient } from "@/types/index"
+import { Feather, MaterialCommunityIcons, Ionicons } from "@expo/vector-icons"
+import { useQuery } from "@tanstack/react-query"
+import { Image } from "expo-image"
+import { router, useLocalSearchParams } from "expo-router"
+import { useRef } from "react"
+import { ScrollView, Text, TouchableOpacity, View, ActivityIndicator, Animated, Dimensions } from "react-native"
+import { LinearGradient } from "expo-linear-gradient"
 
 interface Step {
-  id: string;
-  food_id: string;
-  title: string;
-  step_order: number;
-  description: string;
-  created_at: string;
+  id: string
+  food_id: string
+  title: string
+  step_order: number
+  description: string
+  created_at: string
 }
 
-export default function FoodDetailScreen() {
-  const { id } = useLocalSearchParams();
-  const [activeTab, setActiveTab] = useState("Ingredients");
+const { width } = Dimensions.get("window")
 
-  const foodId = typeof id === "string" ? id : "";
+export default function FoodDetailScreen() {
+  const { id } = useLocalSearchParams()
+  const scrollY = useRef(new Animated.Value(0)).current
+
+  const foodId = typeof id === "string" ? id : ""
 
   const {
     data: foodData,
@@ -46,13 +35,13 @@ export default function FoodDetailScreen() {
   } = useQuery<Foods, Error>({
     queryKey: ["food-detail", foodId],
     queryFn: async () => {
-      const { data, error } = await getFoodById(foodId);
-      if (error) throw error;
-      if (!data) throw new Error("Food not found");
-      return data;
+      const { data, error } = await getFoodById(foodId)
+      if (error) throw error
+      if (!data) throw new Error("Food not found")
+      return data
     },
     enabled: !!foodId,
-  });
+  })
 
   const {
     data: nutrients,
@@ -61,12 +50,12 @@ export default function FoodDetailScreen() {
   } = useQuery<Nutrient | null, Error>({
     queryKey: ["food-nutrients", foodId],
     queryFn: async () => {
-      const { data, error } = await getNutrients(foodId);
-      if (error) throw error;
-      return data;
+      const { data, error } = await getNutrients(foodId)
+      if (error) throw error
+      return data
     },
     enabled: !!foodId && !!foodData,
-  });
+  })
 
   const {
     data: ingredients,
@@ -75,12 +64,12 @@ export default function FoodDetailScreen() {
   } = useQuery<Ingredient[], Error>({
     queryKey: ["food-ingredients", foodId],
     queryFn: async () => {
-      const { data, error } = await getIngredients(foodId);
-      if (error) throw error;
-      return data ?? [];
+      const { data, error } = await getIngredients(foodId)
+      if (error) throw error
+      return data ?? []
     },
     enabled: !!foodId && !!foodData,
-  });
+  })
 
   const {
     data: steps,
@@ -99,321 +88,314 @@ export default function FoodDetailScreen() {
           step_order,
           description,
           created_at
-          `
+          `,
         )
         .eq("food_id", foodId)
-        .order("step_order", { ascending: true });
-      if (error) throw error;
-      return data ?? [];
+        .order("step_order", { ascending: true })
+      if (error) throw error
+      return data ?? []
     },
     enabled: !!foodId && !!foodData,
-  });
+  })
+
+  // Calculate header opacity based on scroll position
+  const headerOpacity = scrollY.interpolate({
+    inputRange: [0, 100, 150],
+    outputRange: [0, 0.5, 1],
+    extrapolate: "clamp",
+  })
+
+  // Calculate image scale based on scroll position
+  const imageScale = scrollY.interpolate({
+    inputRange: [-100, 0, 100],
+    outputRange: [1.2, 1, 0.8],
+    extrapolate: "clamp",
+  })
 
   if (isLoading || stepsLoading || nutrientsLoading || ingredientsLoading) {
     return (
-      <SafeAreaView className="flex-1 bg-white" edges={["top"]}>
-        <View className="flex-1 justify-center items-center">
-          <Text>Loading...</Text>
-        </View>
-      </SafeAreaView>
-    );
+      <View className="items-center justify-center flex-1 bg-white">
+        <ActivityIndicator size="large" color="#bb0718" />
+        <Text className="mt-4 font-medium text-gray-600">Loading recipe details...</Text>
+      </View>
+    )
   }
 
   if (error || !foodData || ingredientsError || stepsError || nutrientsError) {
     return (
-      <SafeAreaView className="flex-1 bg-white" edges={["top"]}>
-        <View className="flex-1 justify-center items-center">
-          <Text>Error loading food details</Text>
-          <TouchableOpacity
-            className="px-4 py-2 bg-yellow-400 rounded-full mt-4"
-            onPress={() => router.push("/home")}
-          >
-            <Text className="text-lg font-bold text-white">
-              Go back to home page
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    );
+      <View className="items-center justify-center flex-1 px-6 bg-white">
+        <Ionicons name="alert-circle-outline" size={64} color="#bb0718" />
+        <Text className="mt-4 mb-2 text-xl font-bold text-center text-gray-800">Oops! Something went wrong</Text>
+        <Text className="mb-6 text-base text-center text-gray-600">
+          We couldn't load the recipe details. Please try again later.
+        </Text>
+        <TouchableOpacity className="px-6 py-3 bg-[#ffd60a] rounded-full" onPress={() => router.push("/home")}>
+          <Text className="text-lg font-bold text-[#bb0718]">Go back to home</Text>
+        </TouchableOpacity>
+      </View>
+    )
   }
 
   const startCookingSession = () => {
-    // Corrected router push to use the actual foodId
-    router.push(`/cooking/${foodId}`);
-  };
+    router.push(`/cooking/${foodId}`)
+  }
+
+  // Recipe info cards data
+  const recipeInfoCards = [
+    {
+      id: "skill_level",
+      title: "Skill Level",
+      icon: <MaterialCommunityIcons name="chef-hat" size={22} color="#4CAF50" />,
+      value: foodData.skill_level || "Easy",
+      color: "#4CAF50",
+    },
+    {
+      id: "cooking_time",
+      title: "Cooking Time",
+      icon: <Feather name="clock" size={22} color="#bb0718" />,
+      value: `${foodData.time_to_cook_minutes || 0} min`,
+      color: "#bb0718",
+    },
+    {
+      id: "ingredients",
+      title: "Ingredients",
+      icon: <Feather name="list" size={22} color="#2196F3" />,
+      value: `${foodData.ingredient_count ?? ingredients?.length ?? 0}`,
+      color: "#2196F3",
+    },
+    {
+      id: "calories",
+      title: "Calories",
+      icon: <Ionicons name="flame" size={22} color="#F44336" />,
+      value: `${foodData.calories || 0} kcal`,
+      color: "#F44336",
+    },
+  ]
 
   return (
-    <SafeAreaView className="flex-1 bg-white" edges={["top"]}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
+    <View className="flex-1 mt-16">
+      {/* Animated header background */}
+      <Animated.View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 90,
+          // backgroundColor: "white",
+          opacity: headerOpacity,
+          zIndex: 10,
+          // shadowColor: "#000",
+          // shadowOffset: { width: 0, height: 2 },
+          // shadowOpacity: 0.1,
+          // shadowRadius: 4,
+          elevation: 5,
+        }}
+      />
+
+      {/* Header with back and share buttons */}
+      <View className="absolute top-0 left-0 right-0 z-20 flex-row justify-between px-4 py-3">
+        <TouchableOpacity
+          className="p-3 rounded-full shadow-sm bg-white/80 backdrop-blur-md"
+          onPress={() => router.back()}
+        >
+          <Feather name="arrow-left" size={24} color="#bb0718" />
+        </TouchableOpacity>
+        <TouchableOpacity className="p-3 rounded-full shadow-sm bg-white/80 backdrop-blur-md">
+          <Feather name="share-2" size={24} color="#333" />
+        </TouchableOpacity>
+      </View>
+
+      <Animated.ScrollView
         className="flex-1"
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={16}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })}
       >
-        <ScrollView className="flex-1">
-          {/* Header with back and share buttons */}
-          <View className="flex-row justify-between px-4 py-3 absolute top-0 left-0 right-0 z-10">
-            <TouchableOpacity
-              className="bg-[#ffd60a] p-3 rounded-lg"
-              onPress={() => router.back()}
-            >
-              <Feather name="arrow-left" size={24} color="#bb0718" />
-            </TouchableOpacity>
-            <TouchableOpacity className="w-10 h-10 rounded-full bg-white justify-center items-center">
-              <IconSymbol
-                name="square.and.arrow.up"
-                size={24}
-                color="#FFCC00"
-              />
-            </TouchableOpacity>
-          </View>
-
-          {/* Food Image */}
-          <View className="items-center mt-16 mb-5">
-            <View
-              style={{
-                width: 200,
-                height: 200,
-                backgroundColor: "#e0e0e0",
-                borderRadius: 24,
-                overflow: "hidden",
-              }}
-            >
-              {foodData.image_url ? (
-                <Image
-                  source={{ uri: foodData.image_url }}
-                  className="w-52 h-52 rounded-full border-4 border-white"
-                  style={{ width: "100%", height: "100%" }}
-                />
-              ) : (
-                <Text className="text-lg font-bold text-gray-500">
-                  Image not available
-                </Text>
-              )}
-            </View>
-          </View>
-
-          {/* Food Title and Description */}
-          <View className="px-4">
-            <Text className="text-2xl font-bold text-gray-800 mb-2">
-              {foodData.name}
-            </Text>
-            <Text className="text-base text-gray-500 mb-5 leading-6">
-              {foodData.description}
-            </Text>
-
-            {/* Info Tabs */}
-            <View className="flex-row justify-between mb-5">
-              <TouchableOpacity
-                className="items-center"
-                onPress={() => setActiveTab("Skills")}
-              >
-                <Text className="text-sm text-gray-500">Skills</Text>
-                <Text className="text-base font-bold text-gray-800 mt-1">
-                  {foodData.skill_level}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                className="items-center"
-                onPress={() => setActiveTab("Time")}
-              >
-                <Text className="text-sm text-gray-500">Time</Text>
-                <Text className="text-base font-bold text-gray-800 mt-1">
-                  {foodData.time_to_cook_minutes}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                className={`items-center ${
-                  activeTab === "Ingredients"
-                    ? "border-b-2 border-gray-800"
-                    : ""
-                }`}
-                onPress={() => setActiveTab("Ingredients")}
-              >
-                <Text className="text-sm text-gray-500">Ingredients</Text>
-                <Text className="text-base font-bold text-gray-800 mt-1">
-                  {/* Use ingredient_count from foodData or length of the fetched ingredients array */}
-                  {foodData.ingredient_count ?? ingredients?.length ?? 0}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                className="items-center"
-                onPress={() => setActiveTab("Calories")}
-              >
-                <Text className="text-sm text-gray-500">Calories</Text>
-                <Text className="text-base font-bold text-gray-800 mt-1">
-                  {foodData.calories}
-                </Text>
-              </TouchableOpacity>
-            </View>
-
-            {/* Ingredients Section */}
-            <View className="mb-5">
-              <Text className="text-xl font-bold text-gray-800 mb-4">
-                Ingredients
-              </Text>
-              <View className="flex-row flex-wrap">
-                {(ingredients ?? []).map(
-                  // Use the 'ingredients' state variable
-                  (
-                    ingredient: Ingredient,
-                    index: number // Added type for ingredient
-                  ) => (
-                    <View
-                      key={ingredient.id || index}
-                      className="w-1/4 items-center mb-4"
-                    >
-                      <View className="w-15 h-15 rounded-full bg-gray-100 justify-center items-center mb-2 shadow">
-                        <Text className="text-2xl">{ingredient.emoji}</Text>
-                      </View>
-                      <Text className="text-xs text-center text-gray-800">
-                        {ingredient.name}
-                      </Text>
-                    </View>
-                  )
-                )}
-                {/* You might want to show a loading/empty state for ingredients here too */}
-                {/*!ingredientsLoading && ingredients?.length === 0 && (
-                <Text className="text-sm text-gray-500">No ingredients listed.</Text>
-              )*/}
+        {/* Food Image with gradient overlay */}
+        <Animated.View
+          style={{
+            height: 350,
+            width: "100%",
+            transform: [{ scale: imageScale }],
+            overflow: "hidden",
+          }}
+        >
+          <Image
+            source={{ uri: foodData.image_url || "/vibrant-food-dish.png" }}
+            style={{ width: "100%", height: "100%" }}
+            contentFit="cover"
+          />
+          <LinearGradient
+            colors={["transparent", "rgba(0,0,0,0.7)"]}
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: 150,
+            }}
+          />
+          <View className="absolute bottom-8 left-6 right-6">
+            <Text className="mb-2 text-3xl font-bold text-white">{foodData.name}</Text>
+            <View className="flex-row items-center">
+              <View className="bg-[#ffd60a] px-3 py-1 rounded-full">
+                <Text className="text-sm font-bold text-[#bb0718]">{foodData.skill_level || "Easy"}</Text>
+              </View>
+              <View className="px-3 py-1 ml-2 rounded-full bg-white/30">
+                <Text className="text-sm font-bold text-white">{foodData.time_to_cook_minutes || 0} min</Text>
               </View>
             </View>
+          </View>
+        </Animated.View>
 
-            {/* Nutrition Section - Improved UI */}
-            <View className="mb-5">
-              <Text className="text-xl font-bold text-gray-800 mb-4">
-                Nutrition Facts
-              </Text>
-              {/* Conditionally render nutrients or show placeholder/loading */}
-              {nutrients ? (
-                <View className="flex-row justify-between bg-white rounded-xl p-4 shadow">
+        <View className="px-6 pt-8 pb-24">
+          {/* Description */}
+          {foodData.description && (
+            <Text className="mb-8 text-base leading-6 text-gray-700">{foodData.description}</Text>
+          )}
+
+          {/* Recipe Info Cards - Horizontal Scrollable */}
+          <View className="mb-10">
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{ paddingRight: 20 }}
+              className="mb-2"
+            >
+              {recipeInfoCards.map((card) => (
+                <View
+                  key={card.id}
+                  className="p-5 mr-4 bg-white border border-gray-100 rounded-2xl"
+                  style={{ width: 130 }}
+                >
                   <View className="items-center">
-                    <View
-                      className="w-15 h-15 rounded-full justify-center items-center mb-2"
-                      style={{ backgroundColor: "#FFD700" }}
-                    >
-                      <Text className="text-lg font-bold text-gray-800">
-                        {nutrients.fat_g ?? 0}
-                      </Text>
-                      <Text className="text-xs text-gray-800 absolute bottom-2.5 right-2.5">
-                        g
-                      </Text>
-                    </View>
-                    <Text className="text-sm font-medium text-gray-800">
-                      Fat
-                    </Text>
-                  </View>
-                  <View className="items-center">
-                    <View
-                      className="w-15 h-15 rounded-full justify-center items-center mb-2"
-                      style={{ backgroundColor: "#90EE90" }}
-                    >
-                      <Text className="text-lg font-bold text-gray-800">
-                        {nutrients.fiber_g ?? 0}
-                      </Text>
-                      <Text className="text-xs text-gray-800 absolute bottom-2.5 right-2.5">
-                        g
-                      </Text>
-                    </View>
-                    <Text className="text-sm font-medium text-gray-800">
-                      Fiber
-                    </Text>
-                  </View>
-                  <View className="items-center">
-                    <View
-                      className="w-15 h-15 rounded-full justify-center items-center mb-2"
-                      style={{ backgroundColor: "#ADD8E6" }}
-                    >
-                      <Text className="text-lg font-bold text-gray-800">
-                        {nutrients.protein_g ?? 0}
-                      </Text>
-                      <Text className="text-xs text-gray-800 absolute bottom-2.5 right-2.5">
-                        g
-                      </Text>
-                    </View>
-                    <Text className="text-sm font-medium text-gray-800">
-                      Protein
-                    </Text>
-                  </View>
-                  <View className="items-center">
-                    <View
-                      className="w-15 h-15 rounded-full justify-center items-center mb-2"
-                      style={{ backgroundColor: "#FFA07A" }}
-                    >
-                      <Text className="text-lg font-bold text-gray-800">
-                        {nutrients.carbs_g ?? 0}
-                      </Text>
-                      <Text className="text-xs text-gray-800 absolute bottom-2.5 right-2.5">
-                        g
-                      </Text>
-                    </View>
-                    <Text className="text-sm font-medium text-gray-800">
-                      Carbs
+                    {card.icon}
+                    <Text className="mt-2 text-sm font-medium text-gray-500">{card.title}</Text>
+                    <Text className="mt-1 text-xl font-bold" style={{ color: card.color }}>
+                      {card.value}
                     </Text>
                   </View>
                 </View>
+              ))}
+            </ScrollView>
+          </View>
+
+          {/* Ingredients Section */}
+          <View className="mb-10">
+            <Text className="mb-5 text-2xl font-bold text-gray-800">Ingredients</Text>
+            <View className="bg-white border border-gray-100 shadow-sm rounded-2xl">
+              {ingredients && ingredients.length > 0 ? (
+                <View className="flex-row flex-wrap justify-between p-4">
+                  {ingredients.map((ingredient, index) => (
+                    <View key={ingredient.id || index} className="w-[30%] items-center mb-6">
+                      <View className="items-center justify-center w-16 h-16 mb-2 rounded-full bg-gray-50">
+                        <Text className="text-3xl">{ingredient.emoji || "🍴"}</Text>
+                      </View>
+                      <Text className="text-sm font-medium text-center text-gray-800">{ingredient.name}</Text>
+                    </View>
+                  ))}
+                </View>
               ) : (
-                <Text className="text-sm text-gray-500">
-                  Nutrition facts not available.
-                </Text>
+                <View className="items-center py-8">
+                  <Feather name="shopping-bag" size={40} color="#e0e0e0" />
+                  <Text className="mt-2 text-center text-gray-400">No ingredients listed</Text>
+                </View>
               )}
             </View>
+          </View>
 
-            {/* Steps Preview */}
-            <View className="mb-5">
-              <Text className="text-xl font-bold text-gray-800 mb-4">
-                Cooking Steps
-              </Text>
-              <View className="bg-gray-100 rounded-xl p-4">
-                {steps && steps.length > 0 ? (
-                  steps.slice(0, 2).map(
-                    (
-                      step: Step,
-                      index: number // Added type for step
-                    ) => (
-                      <View
-                        key={step.id || index}
-                        className="flex-row items-center mb-3"
-                      >
-                        <View className="w-7.5 h-7.5 rounded-full bg-yellow-400 justify-center items-center mr-3">
-                          <Text className="text-base font-bold text-gray-800">
-                            {step.step_order ?? index + 1}{" "}
-                            {/* Use step_order or fallback to index */}
-                          </Text>
-                        </View>
-                        <Text className="text-base text-gray-800 flex-1">
-                          {step.description || step.title}{" "}
-                          {/* Display description or title */}
-                        </Text>
-                      </View>
-                    )
-                  )
-                ) : (
-                  <Text className="text-sm text-gray-500 italic text-center mt-2">
-                    No cooking steps listed
-                  </Text>
-                )}
-                {steps && steps.length > 2 && (
-                  <Text className="text-sm text-gray-500 italic text-center mt-2">
-                    ...and {steps.length - 2} more steps
-                  </Text>
-                )}
+          {/* Nutrition Section */}
+          {nutrients && (
+            <View className="mb-10">
+              <Text className="mb-5 text-2xl font-bold text-gray-800">Nutrition Facts</Text>
+              <View className="p-6 bg-white border border-gray-100 shadow-sm rounded-2xl">
+                <View className="flex-row justify-between">
+                  <NutrientCircle
+                    value={nutrients.protein_g ?? 0}
+                    label="Protein"
+                    color="#2196F3"
+                    bgColor="#2196F3/10"
+                  />
+                  <NutrientCircle value={nutrients.carbs_g ?? 0} label="Carbs" color="#F44336" bgColor="#F44336/10" />
+                  <NutrientCircle value={nutrients.fat_g ?? 0} label="Fat" color="#FFD700" bgColor="#FFD700/10" />
+                  <NutrientCircle value={nutrients.fiber_g ?? 0} label="Fiber" color="#4CAF50" bgColor="#4CAF50/10" />
+                </View>
               </View>
             </View>
-          </View>
-        </ScrollView>
+          )}
 
-        {/* Cook Button */}
+          {/* Steps Preview */}
+          <View className="mb-8">
+            <Text className="mb-5 text-2xl font-bold text-gray-800">Cooking Steps</Text>
+            <View className="bg-white border border-gray-100 shadow-sm rounded-2xl">
+              {steps && steps.length > 0 ? (
+                <View className="p-4">
+                  {steps.slice(0, 3).map((step, index) => (
+                    <View key={step.id || index} className="flex-row mb-6 last:mb-0">
+                      <View className="w-10 h-10 rounded-full bg-[#ffd60a] justify-center items-center mr-4">
+                        <Text className="text-base font-bold text-[#bb0718]">{step.step_order ?? index + 1}</Text>
+                      </View>
+                      <View className="flex-1">
+                        {step.title && <Text className="mb-1 text-base font-bold text-gray-800">{step.title}</Text>}
+                        <Text className="text-base text-gray-700">
+                          {step.description || "No description available"}
+                        </Text>
+                      </View>
+                    </View>
+                  ))}
+                  {steps.length > 3 && (
+                    <TouchableOpacity
+                      className="items-center py-3 mt-4 border-t border-gray-100"
+                      onPress={startCookingSession}
+                    >
+                      <Text className="text-[#bb0718] font-bold">View all {steps.length} steps</Text>
+                    </TouchableOpacity>
+                  )}
+                </View>
+              ) : (
+                <View className="items-center py-8">
+                  <Feather name="list" size={40} color="#e0e0e0" />
+                  <Text className="mt-2 text-center text-gray-400">No cooking steps available</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        </View>
+      </Animated.ScrollView>
+
+      {/* Cook Button */}
+      <View className="absolute bottom-0 left-0 right-0 px-6 pt-4 pb-8 bg-white border-t border-gray-100 shadow-lg">
         <TouchableOpacity
-          className="absolute bottom-0 left-0 right-0 bg-red-600 flex-row justify-center items-center py-4"
+          className="bg-[#bb0718] rounded-full py-4 flex-row justify-center items-center"
           onPress={startCookingSession}
-          // Disable button if essential data is missing or still loading
-          // disabled={isLoading || ingredientsLoading || stepsLoading || !ingredients || !steps}
         >
-          <Text className="text-lg font-bold text-yellow-400 mr-2">
-            Let&apos;s Cook!
-          </Text>
-          <IconSymbol name="fork.knife" size={20} color="#FFCC00" />
+          <Text className="mr-2 text-lg font-bold text-white">Let's Cook!</Text>
+          <MaterialCommunityIcons name="chef-hat" size={24} color="white" />
         </TouchableOpacity>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
+      </View>
+    </View>
+  )
+}
+
+// Helper component for nutrition facts
+function NutrientCircle({
+  value,
+  label,
+  color,
+  bgColor,
+}: { value: number; label: string; color: string; bgColor: string }) {
+  return (
+    <View className="items-center">
+      <View
+        className="items-center justify-center w-16 h-16 mb-2 rounded-full"
+        style={{ backgroundColor: bgColor.replace("/", "-") }}
+      >
+        <Text className="text-xl font-bold" style={{ color }}>
+          {value}g
+        </Text>
+      </View>
+      <Text className="text-sm font-medium text-gray-700">{label}</Text>
+    </View>
+  )
 }