import { Stepper } from "@/components/ui/stepper";
import type { InputsViewModel } from "@/lib/farmer-dashboard";
import { paymentRouteToStepperSteps } from "./utils";

type VoucherPaymentRoute = NonNullable<
  NonNullable<InputsViewModel["voucher"]>["paymentRoute"]
>[number];

interface PaymentRouteStepperProps {
  steps: VoucherPaymentRoute[];
  ariaLabel: string;
}

export function PaymentRouteStepper({ steps, ariaLabel }: PaymentRouteStepperProps) {
  const stepperSteps = paymentRouteToStepperSteps(steps);

  return (
    <div
      data-testid="inputs-payment-route-stepper"
      className="rounded-xl bg-[#F5F0E6] p-4"
    >
      <Stepper steps={stepperSteps} ariaLabel={ariaLabel} />
    </div>
  );
}