components/video-card.js

class VideoCard extends HTMLElement {
    static get observedAttributes() {
        return ['image', 'duration', 'title'];
    }

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
    }

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

    render() {
        const image = this.getAttribute('image') || '';
        const duration = this.getAttribute('duration') || '00:00';
        const title = this.getAttribute('title') || '';

        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    background: white;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                    transition: all 0.3s ease;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                }
                .card-image {
                    width: 100%;
                    height: 180px;
                    object-fit: cover;
                }
                .card-content {
                    padding: 1.25rem;
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                }
                .duration {
                    background: rgba(0, 0, 0, 0.7);
                    color: white;
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                    position: absolute;
                    bottom: 1rem;
                    right: 1rem;
                    font-size: 0.75rem;
                    display: flex;
                    align-items: center;
                    gap: 0.25rem;
                }
                .card-title {
                    font-weight: 600;
                    margin-bottom: 0.75rem;
                    color: #2d3748;
                    flex-grow: 1;
                }
                .play-button {
                    background: #4f46e5;
                    color: white;
                    border: none;
                    padding: 0.5rem 1rem;
                    border-radius: 0.25rem;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    cursor: pointer;
                    transition: background 0.2s;
                    margin-top: auto;
                    width: fit-content;
                }
                .play-button:hover {
                    background: #4338ca;
                }
                .image-container {
                    position: relative;
                }
            </style>
            <div class="card">
                <div class="image-container">
                    <img src="${image}" alt="${title}" class="card-image">
                    <div class="duration">
                        <i data-feather="clock"></i> ${duration}
                    </div>
                </div>
                <div class="card-content">
                    <h3 class="card-title">${title}</h3>
                    <button class="play-button">
                        <i data-feather="play"></i> Assistir
                    </button>
                </div>
            </div>
            <script>feather.replace();</script>
        `;
    }
}

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