import { ArrowRight } from "lucide-react";
import { Alert, Text } from "@mantine/core";

import type { BookingNextStep } from "@/types/booking";

interface NextStepBannerProps {
  nextStep: BookingNextStep;
}

export function NextStepBanner({ nextStep }: NextStepBannerProps) {
  return (
    <Alert
      variant="light"
      color="green"
      radius="md"
      icon={<ArrowRight size={16} />}
      title={
        <Text size="sm" fw={600}>
          Next: {nextStep.action.replace(/_/g, " ")}
          {nextStep.requiredRole ? ` (${nextStep.requiredRole})` : ""}
        </Text>
      }
    >
      <Text size="sm" c="dimmed">
        {nextStep.description}
      </Text>
    </Alert>
  );
}