PoleDanceApp/web/src/components/registrations/RegistrationTimeline.tsx

import { Registration } from "@/types/registration";

const STEPS: { key: string; label: string }[] = [
  { key: "submitted", label: "Submitted" },
  { key: "form_submitted", label: "Form submitted" },
  { key: "payment_pending", label: "Payment pending" },
  { key: "payment_confirmed", label: "Payment confirmed" },
  { key: "video_submitted", label: "Video submitted" },
  { key: "accepted", label: "Accepted" },
];

interface Props {
  registration: Registration;
}

export function RegistrationTimeline({ registration }: Props) {
  const currentIndex = STEPS.findIndex((s) => s.key === registration.status);
  const isRejected = registration.status === "rejected";
  const isWaitlisted = registration.status === "waitlisted";

  if (isRejected) {
    return (
      <div className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
        Your registration was <strong>rejected</strong>.
      </div>
    );
  }

  if (isWaitlisted) {
    return (
      <div className="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-700">
        You are on the <strong>waitlist</strong>.
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <p className="text-sm font-medium text-gray-700">Registration progress</p>
      <ol className="space-y-2">
        {STEPS.map((step, i) => {
          const done = i <= currentIndex;
          return (
            <li key={step.key} className="flex items-center gap-3 text-sm">
              <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                done ? "bg-violet-600 text-white" : "bg-gray-200 text-gray-400"
              }`}>
                {done ? "✓" : i + 1}
              </span>
              <span className={done ? "text-gray-900" : "text-gray-400"}>{step.label}</span>
            </li>
          );
        })}
      </ol>
    </div>
  );
}