import { Button } from "./ui/button";
import { BookingConfirmation } from "./BookingConfirmation";
import { ArrowLeft } from "lucide-react";
import { Vehicle, BookingData } from "../types/booking";

interface ConfirmationStepProps {
  bookingData: BookingData;
  selectedVehicle: Vehicle;
  onConfirm: () => void;
  onEdit: () => void;
  onBack: () => void;
}

export function ConfirmationStep({ bookingData, selectedVehicle, onConfirm, onEdit, onBack }: ConfirmationStepProps) {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        <div className="flex items-center gap-4 mb-6">
          <Button variant="ghost" onClick={onBack}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <h1>Review Your Booking</h1>
        </div>
        <div className="flex justify-center">
          <BookingConfirmation
            bookingData={bookingData}
            selectedVehicle={selectedVehicle}
            onConfirm={onConfirm}
            onEdit={onEdit}
          />
        </div>
      </div>
    </div>
  );
}