class StudyTimer extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .timer-container {
                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
                    border-radius: 12px;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                }
                
                .timer-display {
                    font-family: 'Courier New', monospace;
                }
                
                .timer-btn {
                    transition: all 0.2s ease;
                }
                
                .timer-btn:hover {
                    transform: scale(1.05);
                }
            </style>
            <div class="timer-container text-white p-6">
                <h3 class="text-xl font-bold mb-4">Study Timer</h3>
                <div class="flex flex-col items-center">
                    <div class="timer-display text-5xl font-bold mb-6">00:00:00</div>
                    <div class="flex space-x-4">
                        <button class="timer-btn bg-white text-indigo-600 px-6 py-2 rounded-full font-medium">
                            Start
                        </button>
                        <button class="timer-btn bg-indigo-800 text-white px-6 py-2 rounded-full font-medium">
                            Reset
                        </button>
                    </div>
                </div>
                <div class="mt-6">
                    <label class="block text-sm font-medium mb-2">Set Study Duration</label>
                    <select class="w-full bg-indigo-700 text-white rounded-lg px-4 py-2">
                        <option value="30">30 minutes</option>
                        <option value="45">45 minutes</option>
                        <option value="60">60 minutes</option>
                        <option value="90">90 minutes</option>
                    </select>
                </div>
            </div>
        `;
        
        // Timer functionality would be implemented here
    }
}

customElements.define('study-timer', StudyTimer);