class CustomProjectCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'description', 'tags', 'image'];
  }

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

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
  }

  render() {
    const title = this.getAttribute('title') || 'Project Title';
    const description = this.getAttribute('description') || 'Project description goes here';
    const tags = this.getAttribute('tags') || 'Design, Development';
    const image = this.getAttribute('image') || 'http://static.photos/technology/640x360/1';

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .tag {
          transition: background-color 0.3s ease;
        }
      </style>
      <div class="card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
        <div class="h-48 overflow-hidden">
          <img src="${image}" alt="${title}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">${title}</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4">${description}</p>
          <div class="flex flex-wrap gap-2">
            ${tags.split(',').map(tag => `
              <span class="tag px-3 py-1 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-sm">${tag.trim()}</span>
            `).join('')}
          </div>
          <a href="#" class="mt-4 inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition">
            View Project
            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
          </a>
        </div>
      </div>
    `;
    // Initialize feather icons after content is loaded
    document.addEventListener('DOMContentLoaded', () => {
      feather.replace();
    });
  }
}
customElements.define('custom-project-card', CustomProjectCard);