import Phaser from "phaser";

export class StartScene extends Phaser.Scene {
  constructor() {
    super("StartScene");
  }

  create() {
    const { width, height } = this.scale;

    this.cameras.main.fadeIn(500, 0, 0, 0);

    // Title
    this.add.text(width / 2, height * 0.3, "ROGUE", {
      fontSize: "64px",
      color: "#ff0044",
      fontStyle: "bold",
      stroke: "#ffffff",
      strokeThickness: 4
    }).setOrigin(0.5);

    // Buttons
    const startBtn = this.createButton(width / 2, height * 0.55, "Start Game");
    const optBtn = this.createButton(width / 2, height * 0.65, "Options");

    startBtn.on("pointerdown", () => {
      this.scene.start("GameScene");
    });

    optBtn.on("pointerdown", () => {
      console.log("Options clicked");
    });
  }

  private createButton(x: number, y: number, text: string) {
    const bg = this.add.rectangle(0, 0, 200, 50, 0x333333).setStrokeStyle(2, 0xffffff);
    const txt = this.add.text(0, 0, text, { fontSize: "24px", color: "#ffffff" }).setOrigin(0.5);
    
    const container = this.add.container(x, y, [bg, txt]);
    container.setSize(200, 50);
    container.setInteractive({ useHandCursor: true });

    container.on("pointerover", () => {
      bg.setFillStyle(0x555555);
    });
    container.on("pointerout", () => {
      bg.setFillStyle(0x333333);
    });

    return container;
  }
}
