class CustomEditorToolbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .tool-button {
                    transition: all 0.2s ease;
                }
                
                .tool-button:hover {
                    transform: translateY(-2px);
                }
                
                .tool-button.active {
                    background-color: #e0e7ff;
                    color: #4f46e5;
                    border-color: #a5b4fc;
                }
            </style>
            <div>
                <h3 class="text-lg font-semibold mb-3">Tools</h3>
                <div class="grid grid-cols-4 gap-2">
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="move"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="crop"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="edit-3"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="trash-2"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="layers"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="droplet"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="sliders"></i>
                    </button>
                    <button class="tool-button border border-gray-200 p-2 rounded-lg">
                        <i data-feather="rotate-cw"></i>
                    </button>
                </div>
            </div>
        `;
        
        // Make buttons interactive
        this.shadowRoot.querySelectorAll('.tool-button').forEach(button => {
            button.addEventListener('click', () => {
                this.shadowRoot.querySelectorAll('.tool-button').forEach(btn => {
                    btn.classList.remove('active');
                });
                button.classList.add('active');
            });
        });
    }
}

customElements.define('custom-editor-toolbar', CustomEditorToolbar);