Health & Fitness Coach MCP

"use client" import { ChevronDown, ChevronUp, Dumbbell, Utensils, Target } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { cn } from "@/lib/utils" interface PlanCardProps { isExpanded: boolean setIsExpanded: (expanded: boolean) => void } export function PlanCard({ isExpanded, setIsExpanded }: PlanCardProps) { const workoutPlan = [ { exercise: "Push-ups", sets: "3x12", completed: true }, { exercise: "Squats", sets: "3x15", completed: true }, { exercise: "Plank", sets: "3x30s", completed: false }, { exercise: "Lunges", sets: "3x10", completed: false }, ] const mealPlan = [ { meal: "Breakfast", food: "Oatmeal with berries", calories: 320, completed: true }, { meal: "Lunch", food: "Grilled chicken salad", calories: 450, completed: false }, { meal: "Snack", food: "Greek yogurt", calories: 150, completed: false }, { meal: "Dinner", food: "Salmon with vegetables", calories: 520, completed: false }, ] const workoutProgress = (workoutPlan.filter((w) => w.completed).length / workoutPlan.length) * 100 const mealProgress = (mealPlan.filter((m) => m.completed).length / mealPlan.length) * 100 return ( <div className="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg border border-white/20 overflow-hidden"> {/* Header */} <div className="p-6 bg-gradient-to-r from-slate-50 to-blue-50 border-b border-slate-200/50"> <div className="flex items-center justify-between"> <div> <h2 className="text-xl font-bold text-slate-800">Today's Plan</h2> <p className="text-sm text-slate-600 mt-1">Personalized for your goals</p> </div> <Button variant="ghost" size="sm" onClick={() => setIsExpanded(!isExpanded)} className="rounded-full"> {isExpanded ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />} </Button> </div> </div> {/* Content */} <div className={cn("transition-all duration-300 ease-in-out overflow-hidden", isExpanded ? "block" : "hidden")}> <div className="p-6 space-y-6"> {/* Workout Section */} <div className="space-y-4"> <div className="flex items-center gap-3"> <div className="w-10 h-10 bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl flex items-center justify-center"> <Dumbbell className="w-5 h-5 text-white" /> </div> <div className="flex-1"> <h3 className="font-semibold text-slate-800">Workout Plan</h3> <div className="flex items-center gap-2 mt-1"> <Progress value={workoutProgress} className="flex-1 h-2" /> <span className="text-sm text-slate-600">{Math.round(workoutProgress)}%</span> </div> </div> </div> <div className="space-y-2"> {workoutPlan.map((exercise, index) => ( <button key={index} onClick={() => { console.log(`Toggled ${exercise.exercise}`) }} className={cn( "flex items-center justify-between p-3 rounded-2xl border transition-all duration-200 w-full hover:scale-[1.01]", exercise.completed ? "bg-green-50 border-green-200 text-green-800" : "bg-slate-50 border-slate-200 text-slate-700 hover:bg-slate-100", )} > <div className="flex items-center gap-3"> <div className={cn("w-2 h-2 rounded-full", exercise.completed ? "bg-green-500" : "bg-slate-300")} /> <span className="font-medium">{exercise.exercise}</span> </div> <span className="text-sm font-mono">{exercise.sets}</span> </button> ))} </div> </div> {/* Meal Section */} <div className="space-y-4"> <div className="flex items-center gap-3"> <div className="w-10 h-10 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center"> <Utensils className="w-5 h-5 text-white" /> </div> <div className="flex-1"> <h3 className="font-semibold text-slate-800">Meal Plan</h3> <div className="flex items-center gap-2 mt-1"> <Progress value={mealProgress} className="flex-1 h-2" /> <span className="text-sm text-slate-600">{Math.round(mealProgress)}%</span> </div> </div> </div> <div className="grid gap-3"> {mealPlan.map((meal, index) => ( <button key={index} onClick={() => { // Toggle meal completion const updatedMealPlan = [...mealPlan] updatedMealPlan[index].completed = !updatedMealPlan[index].completed // You would update state here in a real app console.log(`Toggled ${meal.meal}:`, !meal.completed) }} className={cn( "relative p-4 rounded-2xl border-2 transition-all duration-200 group hover:shadow-md text-left w-full", meal.completed ? "bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 shadow-sm" : "bg-gradient-to-r from-slate-50 to-gray-50 border-slate-200 hover:border-green-300 hover:scale-[1.02]", )} > <div className="flex items-start justify-between"> <div className="flex items-start gap-3 flex-1"> <div className={cn( "w-3 h-3 rounded-full mt-1 transition-all duration-200", meal.completed ? "bg-green-500 shadow-lg shadow-green-200" : "bg-slate-300 group-hover:bg-green-400", )} /> <div className="flex-1 min-w-0"> <div className="flex items-center gap-2 mb-1"> <span className={cn( "text-xs font-semibold px-2 py-1 rounded-full", meal.completed ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-600 group-hover:bg-green-100 group-hover:text-green-700", )} > {meal.meal.toUpperCase()} </span> <span className={cn( "text-xs font-mono px-2 py-1 rounded-full", meal.completed ? "bg-green-100 text-green-600" : "bg-slate-100 text-slate-500", )} > {meal.calories} cal </span> </div> <p className={cn( "font-medium text-sm leading-relaxed", meal.completed ? "text-green-800" : "text-slate-700", )} > {meal.food} </p> </div> </div> {meal.completed && ( <div className="ml-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center animate-in slide-in-from-right-1 duration-300"> <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20"> <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> </svg> </div> )} </div> {!meal.completed && ( <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-green-50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-2xl pointer-events-none" /> )} </button> ))} </div> {/* Daily Nutrition Summary */} <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-4 border border-green-200/50"> <h4 className="font-semibold text-green-800 mb-3 text-sm">Daily Nutrition Target</h4> <div className="grid grid-cols-3 gap-4"> <div className="text-center"> <div className="text-lg font-bold text-green-700">1,440</div> <div className="text-xs text-green-600">Total Calories</div> <div className="w-full bg-green-200 rounded-full h-1.5 mt-1"> <div className="bg-green-500 h-1.5 rounded-full w-1/4"></div> </div> </div> <div className="text-center"> <div className="text-lg font-bold text-green-700">120g</div> <div className="text-xs text-green-600">Protein</div> <div className="w-full bg-green-200 rounded-full h-1.5 mt-1"> <div className="bg-green-500 h-1.5 rounded-full w-1/3"></div> </div> </div> <div className="text-center"> <div className="text-lg font-bold text-green-700">45g</div> <div className="text-xs text-green-600">Fiber</div> <div className="w-full bg-green-200 rounded-full h-1.5 mt-1"> <div className="bg-green-500 h-1.5 rounded-full w-1/5"></div> </div> </div> </div> </div> </div> {/* Action Button */} <Button className="w-full rounded-2xl bg-gradient-to-r from-lime-400 to-green-500 hover:from-lime-500 hover:to-green-600 shadow-lg"> <Target className="w-4 h-4 mr-2" /> Update Progress </Button> </div> </div> </div> ) }