import React from 'react';
import { useTranslation } from 'react-i18next';
import './ServiceList.css';

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

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

    return (
        <div className="service-list">
            <h2>{t('services.availableServices')}</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">{t('services.bookNow')}</button>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default ServiceList;