import React from 'react';

const BookingCard = ({ booking, onClick }) => {
    return (
        <div className="card-container" onClick={onClick}>
            <h3>{booking?.service.name}</h3> {/* Assuming the service has a name property */}
            <p>Date: {new Date(booking?.date).toLocaleDateString()}</p>
            <p>Start Time: {new Date(booking?.startTime).toLocaleTimeString()}</p>
            <p>End Time: {new Date(booking?.endTime).toLocaleTimeString()}</p>
            <p>Status: {booking?.status}</p>
            <p>Created on: {new Date(booking?.createdAt).toLocaleDateString()}</p>
        </div>
    );
};

export default BookingCard;