import React from 'react';
import { Icon } from './Icon';

export function BookingCartModal({ bookingCartItems, onClose, onRemoveService, onProceedToBooking }) {
  return (
    <div className="modal-overlay">
      <div className="modal-content cart-modal">
        <button onClick={onClose} className="modal-close-btn"><Icon name="x" style={{ height: '24px', width: '24px' }} /></button>
        <div className="modal-header"><h2>Your Selected Services</h2></div>
        <div className="modal-form cart-items">
          {bookingCartItems.length === 0 ? (<p className="no-data-message">You have not selected any services yet.</p>) : (
            bookingCartItems.map(service => (
              <div key={service.id} className="cart-item">
                <div className="service-icon-container" style={{width: '80px', height: '80px', borderRadius: '0.5rem'}}>
                    <Icon name={service.icon} style={{ height: '40px', width: '40px', color: '#ffffff' }} />
                </div>
                <div className="cart-item-details">
                  <h4>{service.name}</h4>
                  <p>{service.description.substring(0,100)}...</p>
                  <button onClick={() => onRemoveService(service.id)} className="remove-item-btn">Remove</button>
                </div>
              </div>
            ))
          )}
        </div>
        {bookingCartItems.length > 0 && (
          <div className="form-actions cart-footer">
            <div/>
            <button onClick={onProceedToBooking} className="btn-primary checkout-btn">Proceed to Booking</button>
          </div>
        )}
      </div>
    </div>
  );
}