/** خط زمانی وضعیت سفارش */
import { orderStatusLabel, type OrderStatus } from "@/data/orders";
import { formatJalali } from "@/lib/format";

const flow: OrderStatus[] = ["paid", "processing", "shipped", "delivered"];

export function OrderTimeline({ history }: { history: { status: OrderStatus; at: string }[] }) {
  return (
    <ol className="space-y-0">
      {flow.map((s, i) => {
        const done = history.find((h) => h.status === s);
        return (
          <li key={s} className="relative flex gap-3 pb-5 last:pb-0">
            {i < flow.length - 1 && <span className={`absolute start-[7px] top-4 h-full w-px ${done ? "bg-ink" : "bg-line"}`} />}
            <span className={`relative mt-1 size-[15px] shrink-0 rounded-full border-2 ${done ? "border-ink bg-ink" : "border-line bg-paper"}`} />
            <span className="text-sm">
              <span className={done ? "font-bold" : "text-muted"}>{orderStatusLabel[s]}</span>
              {done && <span className="block text-xs text-muted">{formatJalali(done.at)}</span>}
            </span>
          </li>
        );
      })}
    </ol>
  );
}