class OrderCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const status = this.getAttribute('status') || 'new';
    const statusColors = {
      new: 'bg-blue-100 text-blue-800',
      pending: 'bg-yellow-100 text-yellow-800',
      progress: 'bg-purple-100 text-purple-800',
      delivered: 'bg-green-100 text-green-800',
      paid: 'bg-indigo-100 text-indigo-800'
    };

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #e5e7eb;
          border-radius: 0.5rem;
          padding: 1rem;
          margin-bottom: 1rem;
          transition: all 0.3s ease;
        }
        .card:hover {
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .card-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.5rem;
        }
        .status {
          display: inline-block;
          padding: 0.25rem 0.5rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 600;
        }
        .card-body {
          margin: 0.5rem 0;
        }
        .card-footer {
          display: flex;
          justify-content: space-between;
          margin-top: 0.5rem;
        }
        button {
          padding: 0.25rem 0.5rem;
          border-radius: 0.25rem;
          font-size: 0.75rem;
          cursor: pointer;
        }
        .print-btn {
          background: #4f46e5;
          color: white;
        }
      </style>
      <div class="card">
        <div class="card-header">
          <div>Order #${this.getAttribute('id')}</div>
          <div class="status ${statusColors[status]}">${status.toUpperCase()}</div>
        </div>
        <div class="card-body">
          <div>Customer: ${this.getAttribute('customer')}</div>
          <div>Items: ${this.getAttribute('items')}</div>
          <div>Total: ₹${this.getAttribute('total')}</div>
        </div>
        <div class="card-footer">
          <div>${this.getAttribute('date')}</div>
          <button class="print-btn">Print Receipt</button>
        </div>
      </div>
    `;
  }
}
customElements.define('order-card', OrderCard);