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

interface VehiclesStepProps {
  availableVehicles: Vehicle[];
  bookingData: BookingData;
  onVehicleSelect: (vehicle: Vehicle) => void;
  onBack: () => void;
}

export function VehiclesStep({ availableVehicles, bookingData, onVehicleSelect, onBack }: VehiclesStepProps) {
  return (
    <motion.div 
      className="container mx-auto px-4 py-8"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.5 }}
    >
      <div className="max-w-4xl mx-auto">
        <motion.div 
          className="flex items-center gap-4 mb-6"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.2 }}
        >
          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <Button variant="ghost" onClick={onBack}>
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
          </motion.div>
          <div>
            <motion.h1
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
            >
              Available Vehicles
            </motion.h1>
            <motion.p 
              className="text-muted-foreground"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4 }}
            >
              From {bookingData.pickup} to {bookingData.dropoff}
            </motion.p>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
        >
          <VehicleSelection 
            vehicles={availableVehicles} 
            onSelect={onVehicleSelect} 
          />
        </motion.div>
      </div>
    </motion.div>
  );
}