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

function PharmacyList({ pharmacies, loading }) {
  if (loading) {
    return (
      <div className="loading-pharmacies">
        <p>Loading pharmacies...</p>
      </div>
    );
  }

  if (pharmacies.length === 0) {
    return (
      <div className="no-pharmacies">
        <p>No pharmacies found selling this medicine</p>
      </div>
    );
  }

  return (
    <div className="pharmacy-list">
      <h3 className="pharmacy-list-title">
        Available at {pharmacies.length} {pharmacies.length === 1 ? 'pharmacy' : 'pharmacies'}
      </h3>
      <div className="pharmacy-grid">
        {pharmacies.map((pharmacy) => (
          <div key={pharmacy.id} className="pharmacy-card">
            <div className="pharmacy-header">
              <h4>🏥 {pharmacy.name}</h4>
            </div>
            <div className="pharmacy-details">
              <p className="pharmacy-address">📍 {pharmacy.address}</p>
              {pharmacy.phone && (
                <p className="pharmacy-phone">📞 {pharmacy.phone}</p>
              )}
              <div className="pharmacy-pricing">
                {pharmacy.price && (
                  <span className="price">€{parseFloat(pharmacy.price).toFixed(2)}</span>
                )}
                {pharmacy.stock !== undefined && (
                  <span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
                    {pharmacy.stock > 20 ? '✓ In Stock' : pharmacy.stock > 0 ? `⚠ Low Stock (${pharmacy.stock})` : '✗ Out of Stock'}
                  </span>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default PharmacyList;