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

const SummaryCard = ({ 
  title, 
  amount, 
  isLoading = false,
  isPrimary = false 
}) => {
  if (isLoading) {
    return (
      <div className={`summary-card-enhanced ${isPrimary ? 'primary' : ''}`}>
        <div className="card-loading">
          <div className="loading-spinner"></div>
        </div>
      </div>
    );
  }

  return (
    <div className={`summary-card-enhanced ${isPrimary ? 'primary' : ''}`}>
      <div className="card-header">
        <h3 className="card-title">{title}</h3>
      </div>
      <div className="card-amount">${amount || 0}</div>
    </div>
  );
};

export default SummaryCard;

