class GameButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }
    
    connectedCallback() {
        const color = this.getAttribute('color') || 'red';
        const colorClasses = {
            red: 'bg-[var(--red)] hover:bg-red-400',
            blue: 'bg-[var(--blue)] hover:bg-blue-400',
            yellow: 'bg-[var(--yellow)] hover:bg-yellow-400',
            green: 'bg-[var(--green)] hover:bg-green-400',
            purple: 'bg-[var(--purple)] hover:bg-purple-400',
            pink: 'bg-[var(--pink)] hover:bg-pink-400',
            indigo: 'bg-[var(--indigo)] hover:bg-indigo-400',
            teal: 'bg-[var(--teal)] hover:bg-teal-400'
};
        
        this.shadowRoot.innerHTML = `
            <style>
                button {
                    transition: all 0.2s ease;
                    aspect-ratio: 1/1;
                    width: 100%;
                    border: none;
                    cursor: pointer;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                }
                button:active {
                    transform: scale(0.95);
                }
            </style>
            <button class="${colorClasses[color]}"></button>
        `;
    }
    
    flash() {
        const button = this.shadowRoot.querySelector('button');
        button.classList.add('flash-animation');
        setTimeout(() => {
            button.classList.remove('flash-animation');
        }, 500);
    }
}

customElements.define('game-button', GameButton);