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

  connectedCallback() {
    const title = this.getAttribute('title') || 'Crew Build';
    const tank = this.getAttribute('tank') || 'Unknown Tank';
    const rating = this.getAttribute('rating') || '0';
    const perks = this.getAttribute('perks') || 'No perks specified';
    const image = this.getAttribute('image') || 'http://static.photos/technology/320x240/10';
    
    this.shadowRoot.innerHTML = `
      <style>
        .star-filled {
          color: #f59e0b;
        }
        .star-empty {
          color: #6b7280;
        }
        .card-hover {
          transition: all 0.3s ease;
        }
        .card-hover:hover {
          transform: translateY(-5px);
        }
      </style>
      <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover">
        <img class="w-full h-40 object-cover" src="${image}" alt="${tank} crew">
        <div class="p-6">
          <div class="flex justify-between items-start mb-2">
            <h3 class="text-xl font-bold text-white">${title}</h3>
            <button class="favorite-btn text-gray-400 hover:text-red-500">
              <i data-feather="heart" class="w-5 h-5"></i>
            </button>
          </div>
          <div class="flex items-center text-gray-400 mb-3">
            <i data-feather="box" class="w-4 h-4 mr-1"></i>
            <span>${tank}</span>
          </div>
          <div class="flex items-center mb-4">
            <div class="flex mr-2">
              ${this.renderStars(rating)}
            </div>
            <span class="text-sm text-gray-400">${rating}</span>
          </div>
          <div class="mb-4">
            <h4 class="text-sm font-semibold text-gray-300 mb-1">Key Perks:</h4>
            <p class="text-sm text-gray-400">${perks}</p>
          </div>
          <div class="flex justify-between">
            <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm flex items-center">
              <i data-feather="eye" class="mr-2 w-4 h-4"></i> View
            </button>
            <button class="border border-indigo-400 text-indigo-400 hover:bg-indigo-900 px-4 py-2 rounded-lg text-sm flex items-center">
              <i data-feather="share-2" class="mr-2 w-4 h-4"></i> Share
            </button>
          </div>
        </div>
      </div>
    `;
    
    // Initialize feather icons in shadow DOM
    if (feather) {
      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
      icons.forEach(icon => {
        feather.replace(icon);
      });
    }
  }

  renderStars(rating) {
    const numRating = parseFloat(rating);
    const fullStars = Math.floor(numRating);
    const hasHalfStar = numRating % 1 >= 0.5;
    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
    
    let stars = '';
    
    // Full stars
    for (let i = 0; i < fullStars; i++) {
      stars += '<i data-feather="star" class="w-4 h-4 star-filled"></i>';
    }
    
    // Half star
    if (hasHalfStar) {
      stars += '<i data-feather="star" class="w-4 h-4 star-filled"></i>';
    }
    
    // Empty stars
    for (let i = 0; i < emptyStars; i++) {
      stars += '<i data-feather="star" class="w-4 h-4 star-empty"></i>';
    }
    
    return stars;
  }
}

customElements.define('custom-crew-card', CustomCrewCard);