components/video-card.js

class VideoCard extends HTMLElement {
  connectedCallback() {
    const videoId = this.getAttribute('video-id') || 'dQw4w9WgXcQ';
    const title = this.getAttribute('title') || 'News Analysis Video';
    const description = this.getAttribute('description') || 'My take on current events';
    const duration = this.getAttribute('duration') || '10:00';
    const views = this.getAttribute('views') || '1.2k';
    const likes = this.getAttribute('likes') || '150';

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 1.5rem;
        }
        .card {
          background: white;
          border-radius: 0.5rem;
          overflow: hidden;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
          transition: box-shadow 0.3s ease;
        }
        .card:hover {
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }
        .video-container {
          position: relative;
          padding-bottom: 56.25%;
          background: #000;
        }
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
        }
        .content {
          padding: 1rem;
        }
        .title {
          font-weight: 600;
          font-size: 1.125rem;
          margin-bottom: 0.5rem;
          color: #1f2937;
        }
        .description {
          color: #6b7280;
          font-size: 0.875rem;
          margin-bottom: 1rem;
        }
        .meta {
          display: flex;
          align-items: center;
          color: #6b7280;
          font-size: 0.75rem;
        }
        .meta span {
          display: flex;
          align-items: center;
          margin-right: 1rem;
        }
        i {
          margin-right: 0.25rem;
          width: 1rem;
          height: 1rem;
        }
      </style>
      <div class="card">
        <div class="video-container">
          ${videoId.includes('rumble.com') ? 
            `<iframe src="https://rumble.com/embed/${videoId.split('v')[1].split('-')[0]}/?pub=4" 
                    frameborder="0" 
                    allowfullscreen></iframe>` : 
            `<iframe src="https://www.youtube.com/embed/${videoId}" 
                    frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowfullscreen></iframe>`}
</div>
        <div class="content">
          <h3 class="title">${title}</h3>
          <p class="description">${description}</p>
          <div class="meta">
            <span><i data-feather="clock"></i> ${duration}</span>
            <span><i data-feather="eye"></i> ${views} views</span>
            <span><i data-feather="thumbs-up"></i> ${likes} likes</span>
          </div>
        </div>
      </div>
    `;
    feather.replace({ class: 'feather', 'stroke-width': 2 });
  }
}

customElements.define('video-card', VideoCard);