class StatsCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'value', 'icon', 'color'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }

  render() {
    const title = this.getAttribute('title') || '';
    const value = this.getAttribute('value') || '';
    const icon = this.getAttribute('icon') || 'alert-circle';
    const color = this.getAttribute('color') || 'blue';

    const colorClasses = {
      blue: { bg: 'bg-blue-50', text: 'text-blue-600' },
      green: { bg: 'bg-green-50', text: 'text-green-600' },
      orange: { bg: 'bg-orange-50', text: 'text-orange-600' },
      indigo: { bg: 'bg-indigo-50', text: 'text-indigo-600' },
      red: { bg: 'bg-red-50', text: 'text-red-600' },
      yellow: { bg: 'bg-yellow-50', text: 'text-yellow-600' },
}[color];

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          background: #ffffff;
          border-radius: 12px;
          padding: 1.5rem;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .card-title {
          font-size: 0.875rem;
          color: #6b7280;
        }
        .card-value {
          font-size: 1.75rem;
          font-weight: 600;
          color: #111827;
          margin-bottom: 0.5rem;
        }
        .card-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
      <div class="card">
        <div class="card-header">
          <div>
            <div class="card-title">${title}</div>
            <div class="card-value">${value}</div>
          </div>
          <div class="card-icon ${colorClasses.bg}">
            <i data-feather="${icon}" class="${colorClasses.text}"></i>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('stats-card', StatsCard);