import { OrderStatus } from "@/lib/types";

const STEPS: { key: OrderStatus; label: string }[] = [
  { key: "pending", label: "Order received" },
  { key: "paid", label: "Payment confirmed" },
  { key: "processing", label: "Processing" },
  { key: "out_for_delivery", label: "Out for delivery" },
  { key: "delivered", label: "Delivered" },
];

export function OrderStatusStepper({ status }: { status: OrderStatus }) {
  if (status === "cancelled") {
    return (
      <div className="rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-danger">
        This order was cancelled.
      </div>
    );
  }

  const currentIndex = STEPS.findIndex((s) => s.key === status);

  return (
    <ol className="flex flex-col gap-0">
      {STEPS.map((step, i) => {
        const done = i <= currentIndex;
        const isLast = i === STEPS.length - 1;
        return (
          <li key={step.key} className="flex gap-3">
            <div className="flex flex-col items-center">
              <span
                className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                  done ? "bg-brand-orange text-white" : "bg-black/10 text-black/40"
                }`}
              >
                {done ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                ) : (
                  i + 1
                )}
              </span>
              {!isLast && (
                <span
                  className={`mt-1 h-8 w-0.5 ${done ? "bg-brand-orange" : "bg-black/10"}`}
                />
              )}
            </div>
            <div className="pb-8">
              <p
                className={`text-sm font-medium ${
                  done ? "text-brand-ink" : "text-black/40"
                }`}
              >
                {step.label}
              </p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}