class ButtonSprite extends Sprite {
    constructor(x, y, width, height, text, onClick) {
        super(x, y, width, height);
        this.text = text;
        this.onClick = onClick;
        this.hover = false;
    }

    update(sprites, inputManager, mouse) {
        const hovered = mouse.x >= this.x &&
                        mouse.x <= this.x + this.width &&
                        mouse.y >= this.y &&
                        mouse.y <= this.y + this.height;

        if (hovered && mouse.clicked && typeof this.onClick === 'function') {
            this.onClick(); // ✅ trigger level change
        }

        this.hover = hovered;
        return false;
    }

        draw(ctx) {
        // Button style
        ctx.save();
        ctx.fillStyle = this.hover ? 'rgba(255, 255, 255, 0.3)' : 'rgba(255, 255, 255, 0.2)';
        ctx.strokeStyle = this.hover ? '#ffffff' : '#cccccc';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.roundRect(this.x, this.y, this.width, this.height, 12);
        ctx.fill();
        ctx.stroke();

        // Text
        ctx.fillStyle = '#FFFFFF';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(this.text, this.x + this.width / 2, this.y + this.height / 2);
        ctx.restore();
    }
}

// class ButtonSprite extends Sprite {
//     constructor(x, y, width, height, text, onClick) {
//         super(x, y, width, height);
//         this.text = text;
//         this.onClick = onClick;
//         this.hover = false;
//     }

//     update(sprites, input, mouse) {
//         const hovered = (
//             mouse.x >= this.x &&
//             mouse.x <= this.x + this.width &&
//             mouse.y >= this.y &&
//             mouse.y <= this.y + this.height
//         );

//         if (hovered && mouse.clicked && typeof this.onClick === 'function') {
//             this.onClick();
//         }

//         this.hover = hovered;
//         return false;
//     }

//     draw(ctx) {
//         // Button style
//         ctx.save();
//         ctx.fillStyle = this.hover ? 'rgba(255, 255, 255, 0.3)' : 'rgba(255, 255, 255, 0.2)';
//         ctx.strokeStyle = this.hover ? '#ffffff' : '#cccccc';
//         ctx.lineWidth = 2;
//         ctx.beginPath();
//         ctx.roundRect(this.x, this.y, this.width, this.height, 12);
//         ctx.fill();
//         ctx.stroke();

//         // Text
//         ctx.fillStyle = '#FFFFFF';
//         ctx.font = '20px Arial';
//         ctx.textAlign = 'center';
//         ctx.textBaseline = 'middle';
//         ctx.fillText(this.text, this.x + this.width / 2, this.y + this.height / 2);
//         ctx.restore();
//     }
// }

// // Polyfill for roundRect if not supported (old browsers)
// CanvasRenderingContext2D.prototype.roundRect ??= function (x, y, w, h, r) {
//     if (typeof r === "number") r = {tl: r, tr: r, br: r, bl: r};
//     this.beginPath();
//     this.moveTo(x + r.tl, y);
//     this.lineTo(x + w - r.tr, y);
//     this.quadraticCurveTo(x + w, y, x + w, y + r.tr);
//     this.lineTo(x + w, y + h - r.br);
//     this.quadraticCurveTo(x + w, y + h, x + w - r.br, y + h);
//     this.lineTo(x + r.bl, y + h);
//     this.quadraticCurveTo(x, y + h, x, y + h - r.bl);
//     this.lineTo(x, y + r.tl);
//     this.quadraticCurveTo(x, y, x + r.tl, y);
//     this.closePath();
// };
// // class ButtonSprite extends Sprite {
// //     constructor(x, y, width, height, text, onClick) {
// //         super(x, y, width, height);
// //         this.text = text;
// //         this.onClick = onClick;
// //         this.hover = false;
// //     }

// //     update(sprites, input, mouse) {
// //         const hovered = (
// //             mouse.x >= this.x &&
// //             mouse.x <= this.x + this.width &&
// //             mouse.y >= this.y &&
// //             mouse.y <= this.y + this.height
// //         );

// //         if (hovered && mouse.clicked && typeof this.onClick === 'function') {
// //             this.onClick();
// //         }

// //         this.hover = hovered;
// //         return false;
// //     }

// //     draw(ctx) {
// //         ctx.fillStyle = this.hover ? '#ccc' : '#888';
// //         ctx.fillRect(this.x, this.y, this.width, this.height);
// //         ctx.fillStyle = 'black';
// //         ctx.font = '20px Arial';
// //         ctx.fillText(this.text, this.x + 10, this.y + this.height / 2 + 6);
// //     }
// // }
