import { useComputed } from '@preact/signals';
import { createGameHost, type GameModule } from 'boardgame-core';
import Phaser from 'phaser';
import { h } from 'preact';
import { PhaserGame, PhaserScene } from 'boardgame-phaser';

export default function App<TState extends Record<string, unknown>>(props: { gameModule: GameModule<TState>, gameScene: { new(): Phaser.Scene } }) {

    const gameHost = useComputed(() => {
        const gameHost = createGameHost(props.gameModule);
        gameHost.setup('setup');
        return { gameHost };
    });

    const scene = useComputed(() => new props.gameScene());

    return (
        <div className="flex flex-col h-screen">
            <div className="flex-1 relative">
                <PhaserGame>
                    <PhaserScene sceneKey="GameScene" scene={scene.value} autoStart data={gameHost.value} />
                </PhaserGame>
            </div>
        </div>
    );
}