Untitled

import React, { useState } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

const buses = [
  { id: 1, name: "City Express", time: "10:00 AM", seats: 5 },
  { id: 2, name: "Night Rider", time: "8:00 PM", seats: 4 },
  { id: 3, name: "Morning Star", time: "6:00 AM", seats: 6 },
];

export default function BusReservationApp() {
  const [selectedBus, setSelectedBus] = useState(null);
  const [selectedSeat, setSelectedSeat] = useState(null);
  const [bookingConfirmed, setBookingConfirmed] = useState(false);

  const handleSelectBus = (bus) => {
    setSelectedBus(bus);
    setSelectedSeat(null);
    setBookingConfirmed(false);
  };

  const handleSelectSeat = (seat) => {
    setSelectedSeat(seat);
  };

  const handleConfirmBooking = () => {
    if (selectedBus && selectedSeat !== null) {
      setBookingConfirmed(true);
    }
  };

  return (
    <div className="p-6 grid gap-4 max-w-xl mx-auto">
      <h1 className="text-3xl font-bold mb-4 text-center">Bus Reservation App</h1>

      {!selectedBus ? (
        buses.map(bus => (
          <motion.div key={bus.id} whileHover={{ scale: 1.02 }}>
            <Card onClick={() => handleSelectBus(bus)} className="cursor-pointer">
              <CardContent className="p-4">
                <h2 className="text-xl font-semibold">{bus.name}</h2>
                <p>Departure Time: {bus.time}</p>
                <p>Available Seats: {bus.seats}</p>
              </CardContent>
            </Card>
          </motion.div>
        ))
      ) : (
        <div className="space-y-4">
          <Button variant="outline" onClick={() => setSelectedBus(null)}>
            Back to Buses
          </Button>

          <h2 className="text-2xl font-semibold">Select a Seat on {selectedBus.name}</h2>
          <div className="grid grid-cols-4 gap-2">
            {[...Array(selectedBus.seats)].map((_, i) => (
              <Button
                key={i}
                variant={selectedSeat === i ? "default" : "outline"}
                onClick={() => handleSelectSeat(i)}
              >
                Seat {i + 1}
              </Button>
            ))}
          </div>

          <Button onClick={handleConfirmBooking} disabled={selectedSeat === null}>
            Confirm Booking
          </Button>

          {bookingConfirmed && (
            <p className="text-green-600 font-semibold">
              Booking Confirmed! Seat {selectedSeat + 1} on {selectedBus.name}
            </p>
          )}
        </div>
      )}
    </div>
  );
}