components/image-preview.js

class ImagePreview extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin: 1rem 0;
                }
                .preview-container {
                    position: relative;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }
                img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
                .actions {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
                    padding: 1rem;
                    display: flex;
                    justify-content: space-between;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }
                .preview-container:hover .actions {
                    opacity: 1;
                }
                button {
                    background: rgba(99, 102, 241, 0.8);
                    color: white;
                    border: none;
                    padding: 0.5rem 1rem;
                    border-radius: 0.25rem;
                    cursor: pointer;
                    font-size: 0.875rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    transition: all 0.2s ease;
                }
                button:hover {
                    background: rgba(99, 102, 241, 1);
                    transform: translateY(-1px);
                }
                .ai-tag {
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    background: rgba(0,0,0,0.7);
                    color: white;
                    padding: 2px 6px;
                    border-radius: 4px;
                    font-size: 0.7rem;
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
</style>
            <div class="preview-container">
                ${this.hasAttribute('ai-generated') ? 
                  `<div class="ai-tag">
                    <i data-feather="zap"></i>
                    AI Generated
                  </div>` : ''}
                <img src="" alt="Preview">
<div class="actions">
                    <button class="download-btn">
                        <i data-feather="download"></i>
                        Download
                    </button>
                    <button class="edit-btn">
                        <i data-feather="edit"></i>
                        Edit
                    </button>
                </div>
            </div>
        `;
        
        // Set image source from attribute
        if (this.hasAttribute('src')) {
            this.shadowRoot.querySelector('img').src = this.getAttribute('src');
        }
        
        // Add event listeners for buttons
        this.shadowRoot.querySelector('.download-btn').addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('download'));
        });
        
        this.shadowRoot.querySelector('.edit-btn').addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('edit'));
        });
    }
    static get observedAttributes() {
        return ['src', 'ai-generated'];
    }
attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'src' && this.shadowRoot) {
            this.shadowRoot.querySelector('img').src = newValue;
        }
    }
}

customElements.define('image-preview', ImagePreview);