配送ルートRouteStopsBeta

import * as React from "react";
import { Button, RouteStops, type RouteStopItem } from "@gunjo/ui";

const baseStops: RouteStopItem[] = [
  { id: "1", title: "佐藤 一郎", description: "東京都渋谷区神南 1-2-3", status: "completed", plannedTime: "09:30", actualTime: "09:28", meta: "2個" },
  { id: "2", title: "鈴木 商店", description: "東京都渋谷区宇田川町 4-5", status: "completed", plannedTime: "09:50", actualTime: "09:58", meta: "5個" },
  { id: "3", title: "高橋 花子", description: "東京都渋谷区道玄坂 2-6-7", status: "current", plannedTime: "10:15", actualTime: "10:21", meta: "1個" },
  { id: "4", title: "田中 工業", description: "東京都渋谷区桜丘町 8-9", status: "failed", plannedTime: "10:40", meta: "3個" },
  { id: "5", title: "山田 太郎", description: "東京都目黒区上目黒 1-1", status: "delayed", plannedTime: "11:00", delayMinutes: 18, meta: "1個" },
  { id: "6", title: "伊藤 ストア", description: "東京都目黒区中目黒 3-2", status: "pending", plannedTime: "11:25", meta: "4個" },
];

export function DeliveryRoute() {
  const [currentOutcome, setCurrentOutcome] = React.useState<"active" | "completed" | "failed">("active");
  const stops = baseStops.map((stop) => {
    if (stop.id === "3") {
      return {
          ...stop,
          status: currentOutcome === "completed" ? "completed" as const : currentOutcome === "failed" ? "failed" as const : "current" as const,
          actions: currentOutcome === "active" ? (
            <>
              <Button type="button" size="sm" variant="outline" onClick={() => setCurrentOutcome("completed")}>
                完了
              </Button>
              <Button type="button" size="sm" variant="ghost" onClick={() => setCurrentOutcome("failed")}>
                不在
              </Button>
            </>
          ) : undefined,
        };
    }
    if (currentOutcome !== "active" && stop.id === "4") return { ...stop, status: "current" as const };
    return stop;
  });

  return (
    <div className="flex w-full max-w-md flex-col rounded-lg border bg-card p-4">
      <RouteStops stops={stops} currentLabel="現在地" timeLabels={{ planned: "予定", actual: "実績" }} />
    </div>
  );
}