components/controls.js

class CustomControls extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .controls-container {
                    @apply bg-gray-800 p-4 rounded-lg shadow-xl;
                }
                .control-group {
                    @apply mb-4;
                }
                .control-label {
                    @apply block text-sm font-medium mb-1;
                }
                .control-select {
                    @apply mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md bg-gray-700 text-white;
                }
                .btn {
                    @apply w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
                }
                .btn-secondary {
                    @apply mt-2 w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
                }
            </style>
            <div class="controls-container">
                <div class="control-group">
                    <label class="control-label">Mode:</label>
                    <select id="mode-select" class="control-select">
                        <option value="draw">Draw Mode</option>
                        <option value="start">Set Start</option>
                        <option value="end">Set End</option>
                        <option value="wall">Place Walls</option>
                    </select>
                </div>
                
                <button id="solve-btn" class="btn">
                    <i data-feather="play" class="mr-2"></i> Solve Puzzle
                </button>
                
                <button id="reset-btn" class="btn-secondary">
                    <i data-feather="refresh-cw" class="mr-2"></i> Reset Board
                </button>
                
                <div class="control-group mt-6">
                    <h3 class="font-bold mb-2">Instructions:</h3>
                    <p class="text-sm text-gray-300">
                        1. Set start and end points<br>
                        2. Add walls to create obstacles<br>
                        3. Click "Solve Puzzle" to find path
                    </p>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-controls', CustomControls);