import { ArrowRight } from "lucide-react";

import type { BookingNextStep } from "@/types/booking";
import { bookingGlass } from "./booking-ui.styles";
import { cn } from "@/lib/utils";

interface NextStepBannerProps {
  nextStep: BookingNextStep;
  className?: string;
}

export function NextStepBanner({ nextStep, className }: NextStepBannerProps) {
  return (
    <div
      className={cn(
        "flex items-start gap-3 rounded-xl px-4 py-3 text-sm",
        bookingGlass.activeTab,
        className,
      )}
      role="status"
    >
      <ArrowRight className="mt-0.5 size-4 shrink-0 text-black" aria-hidden />
      <div className="min-w-0 space-y-0.5">
        <p className="font-semibold text-black">
          Next: {nextStep.action.replace(/_/g, " ")}
          {nextStep.requiredRole ? ` (${nextStep.requiredRole})` : ""}
        </p>
        <p className="text-muted-foreground">{nextStep.description}</p>
      </div>
    </div>
  );
}