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

  connectedCallback() {
    const pair = this.getAttribute('pair') || 'BTC/USDT';
    const image = this.getAttribute('image') || 'http://static.photos/finance/640x360/1';
    const description = this.getAttribute('description') || 'Cryptocurrency trading pair';

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          border-radius: 0.75rem;
          overflow: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        :host(:hover) {
          transform: translateY(-4px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        a {
          display: block;
          text-decoration: none;
          color: inherit;
        }
        .image-container {
          height: 12rem;
          background-size: cover;
          background-position: center;
          background-image: url('${image}');
        }
        .content {
          padding: 1.5rem;
          background: white;
        }
        h3 {
          margin: 0 0 0.5rem 0;
          font-size: 1.25rem;
          font-weight: 600;
          color: #111827;
        }
        p {
          margin: 0;
          color: #6b7280;
          font-size: 0.875rem;
        }
      </style>
      <a href="pair-details.html?pair=${pair}">
        <div class="image-container"></div>
        <div class="content">
          <h3>${pair}</h3>
          <p>${description}</p>
        </div>
      </a>
    `;
  }
}

customElements.define('pair-card', PairCard);