class CustomQuickLinks extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .quick-links-container {
                    background-color: rgba(31, 41, 55, 0.8);
                    border-radius: 0.75rem;
                    padding: 1.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                .links-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                }
                .links-icon {
                    margin-right: 0.5rem;
                    color: #60a5fa;
                }
                .links-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 0.75rem;
                }
                .link-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    background-color: rgba(55, 65, 81, 0.8);
                    transition: background-color 0.2s;
                    cursor: pointer;
                }
                .link-item:hover {
                    background-color: rgba(75, 85, 99, 0.8);
                }
                .link-icon {
                    margin-right: 0.75rem;
                    color: #60a5fa;
                }
                .link-text {
                    font-size: 0.875rem;
                }
                .proxy-badge {
                    margin-left: auto;
                    font-size: 0.625rem;
                    padding: 0.125rem 0.375rem;
                    border-radius: 9999px;
                    background-color: rgba(59, 130, 246, 0.1);
                    color: #60a5fa;
                }
            </style>
            <div class="quick-links-container">
                <h3 class="links-title">
                    <i data-feather="zap" class="links-icon"></i>
                    Quick Links
                </h3>
                
                <div class="links-grid">
                    <div class="link-item" data-url="https://www.google.com">
                        <i data-feather="search" class="link-icon"></i>
                        <span class="link-text">Google</span>
                    </div>
                    <div class="link-item" data-url="https://www.youtube.com" data-proxy="true">
                        <i data-feather="youtube" class="link-icon"></i>
                        <span class="link-text">YouTube</span>
                        <span class="proxy-badge">Proxy</span>
                    </div>
                    <div class="link-item" data-url="https://www.wikipedia.org">
                        <i data-feather="book" class="link-icon"></i>
                        <span class="link-text">Wikipedia</span>
                    </div>
                    <div class="link-item" data-url="https://www.reddit.com" data-proxy="true">
                        <i data-feather="message-square" class="link-icon"></i>
                        <span class="link-text">Reddit</span>
                        <span class="proxy-badge">Proxy</span>
                    </div>
                    <div class="link-item" data-url="https://www.twitter.com">
                        <i data-feather="twitter" class="link-icon"></i>
                        <span class="link-text">Twitter</span>
                    </div>
                    <div class="link-item" data-url="https://www.github.com">
                        <i data-feather="github" class="link-icon"></i>
                        <span class="link-text">GitHub</span>
                    </div>
                </div>
            </div>
        `;
        
        // Add click handlers for quick links
        const linkItems = this.shadowRoot.querySelectorAll('.link-item');
        linkItems.forEach(item => {
            item.addEventListener('click', () => {
                const url = item.getAttribute('data-url');
                const useProxy = item.hasAttribute('data-proxy');
                
                this.dispatchEvent(new CustomEvent('quick-link-click', {
                    detail: {
                        url: url,
                        useProxy: useProxy
                    },
                    bubbles: true,
                    composed: true
                }));
            });
        });
    }
}

customElements.define('custom-quick-links', CustomQuickLinks);