import { motion } from 'framer-motion'; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from 'recharts'; import { Trophy, TrendingUp, Clock, Sparkles, CheckCircle2, XCircle, MessageSquareText, BarChart3 } from 'lucide-react'; import clsx from 'clsx'; function rewardColor(r) { if (r >= 0.75) return '#00FF88'; if (r >= 0.45) return '#FFAA00'; return '#FF4455'; } function StatCard({ icon: Icon, label, value, color, subtitle }) { return (
{label}
{value}
{subtitle &&

{subtitle}

}
); } function RewardChart({ rewards }) { const data = rewards.map((r, i) => ({ step: i + 1, reward: r })); // Pad to 5 steps for consistent chart for (let i = data.length + 1; i <= 5; i++) { data.push({ step: i, reward: null }); } return (
Reward Curve
val !== null ? val.toFixed(3) : '—'} />
); } export default function RewardPanel({ rewards, stepCount, isDone, rewardComponents, feedback, attempts, }) { const latestReward = rewards.length > 0 ? rewards[rewards.length - 1] : null; const avgReward = rewards.length > 0 ? rewards.reduce((a, b) => a + b, 0) / rewards.length : 0; const success = latestReward !== null && latestReward >= 0.85; return ( ); }