import React from 'react';
import './ServiceList.css';

const ServiceList = ({ services, onSelectService, loading }) => {
    if (loading) {
        return <div className="service-list-loading">Loading services...</div>;
    }

    if (!services || services.length === 0) {
        return <div className="service-list-empty">No services available</div>;
    }

    return (
        <div className="service-list">
            <h2>Available Services</h2>
            <div className="service-grid">
                {services.map((service) => (
                    <div
                        key={service.id}
                        className="service-card"
                        onClick={() => onSelectService(service)}
                    >
                        <h3>{service.name}</h3>
                        <div className="service-details">
                            <span className="service-duration">{service.duration} min</span>
                            <span className="service-price">${service.price}</span>
                        </div>
                        {service.description && (
                            <p className="service-description">{service.description}</p>
                        )}
                        <button className="service-book-btn">Book Now</button>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default ServiceList;