"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Progress } from "@/components/ui/progress" import { cn } from "@/lib/utils" import { UtensilsCrossed, Bike, ChefHat, CheckCircle2, Clock, MapPin, Phone, MessageCircle, ShoppingBag, } from "lucide-react" const steps = [ { label: "Order Placed", time: "7:25 PM", completed: true }, { label: "Preparing", time: "7:30 PM", completed: true }, { label: "Out for Delivery", time: "7:45 PM", completed: false, active: true }, { label: "Delivered", time: "~8:00 PM", completed: false }, ] export default function OrderTrackingFood() { const [progress, setProgress] = useState(55) return (

Live Tracking

Order #AN-8492

Estimated delivery: 15-20 min

Your rider is on the way!

Michael will be at your door in ~15 minutes

Delivery Progress {progress}%

{steps.map((step, i) => (

{step.completed ? ( ) : step.active ? (

) : (

)}

{i < steps.length - 1 && (

)}

{step.label}

{step.time}

))}

Order Items {[ { name: "Wagyu Burger x2", price: "MK 88,400" }, { name: "Truffle Fries x1", price: "MK 27,200" }, { name: "Margherita Pizza x1", price: "MK 30,600" }, ].map((item) => (

{item.name} {item.price}

))}

TotalMK 146,200

) }

Order Tracking Food

Order #AN-8492

Order #AN-8492