TimelineAndroid

import * as React from "react";
import { View } from "react-native";
import { Timeline, type TimelineItem } from "../timeline";
import { Button } from "../../button/button";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

const STEPS = [
  { title: "Order placed", subtitle: "6:12 PM · paid $29.00", icon: "check-circle" },
  { title: "Kitchen confirmed", subtitle: "Sakura Ramen started cooking", icon: "utensils" },
  { title: "Out for delivery", subtitle: "Diego picked up · scooter", icon: "truck" },
  { title: "Delivered", subtitle: "Left at the blue door", icon: "package" },
] as const;

/** TimelineOrder — order tracker that advances a step on each tap. */
export function TimelineOrder() {
  const [step, setStep] = React.useState(1);
  const items: TimelineItem[] = STEPS.map((s, i) => ({
    title: s.title,
    subtitle: s.subtitle,
    icon: s.icon,
    state: i < step ? "done" : i === step ? "current" : "upcoming",
  }));
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="font-semibold">Order #8421</Text>
            <View className="flex-row items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1">
              <Icon name="clock" size="sm" color="primary" />
              <Text className="text-xs font-semibold text-primary">
                {step === 0 ? "Confirming" : step === 1 ? "Cooking" : step === 2 ? "On the way" : "Delivered"}
              </Text>
            </View>
          </View>

          <Timeline items={items} />

          <Button
            size="sm"
            variant={step >= STEPS.length - 1 ? "outline" : "default"}
            onPress={() => setStep((s) => (s >= STEPS.length - 1 ? 0 : s + 1))}
          >
            {step >= STEPS.length - 1 ? "Replay order" : "Advance step"}
          </Button>
        </Glass>
      </View>
  );
}