"use client" import * as React from "react" import { motion } from "motion/react" import { Car, MessageCircle, Phone, Star } from "lucide-react" import { activity, ActivityButton, ActivityCollapse, ActivityCompact, ActivityExpanded, ActivityGlyph, ActivityProgress, ActivityReveal, ActivityShared, ActivityTrigger, } from "@/components/ui/activity" import { GradientOrb } from "@/components/ui/gradient-orb" const TRIP_SECONDS = 240 const STEP_SECONDS = 4 const TRIP_KM = 2.4 const DRIVER = { name: "Maya", rating: "4.9", car: "Red Prius", plate: "7KX 482", photo: "/showcase/hatchback-red.png" } function useEta() { const [left, setLeft] = React.useState(TRIP_SECONDS) React.useEffect(() => { const interval = setInterval(() => setLeft((value) => Math.max(0, value - STEP_SECONDS)), 1000) return () => clearInterval(interval) }, []) return { left, progress: 1 - left / TRIP_SECONDS, arrived: left === 0 } } function etaLabel(seconds: number) { return seconds === 0 ? "Now" : `${Math.max(1, Math.ceil(seconds / 60))} min` } function CarPhoto({ className }: { className: string }) { return ( {DRIVER.car}

) } function CarDial({ progress }: { progress: number }) { return ( ) } function Route({ progress }: { progress: number }) { return (

) } export function RideActivity() { const { left, progress, arrived } = useEta() const title = arrived ? "Your ride is here" : "Your ride" const away = ((1 - progress) * TRIP_KM).toFixed(1) return ( <> {title} {DRIVER.plate} {etaLabel(left)}

{title} {arrived ? "Meet Maya at the pickup point" : `${away} km away`}

{etaLabel(left)} {DRIVER.plate}

{DRIVER.name} {DRIVER.rating} {DRIVER.car}

) } export function showRide() { return activity.show({ id: "ride", view: RideActivity }) }