import React, { useCallback } from "react"
import styles from '../styles/Background.module.css';
import Tower from "./Tower";
import Army from "./Army";
import MarchingBand from "./MarchingBand";
import MusicPlayer from "./MusicPlayer";
import { usePlayer } from "../providers/PlayerProvider";

const Scene = () => {
  const { isRegistered } = usePlayer();
  const handleMusicReady = useCallback((unmute: () => void) => {
    if (isRegistered) {
      unmute();
    }
  }, [isRegistered]);

  return <div className={styles.frame}>
    <div className={`${styles.air} ${styles.background_asset}`} />
    <div className={`${styles.clouds_small} ${styles.background_asset}`} />
    <div className={`${styles.clouds_large} ${styles.background_asset}`} />
    <Tower />
    <div className={`${styles.mountains} ${styles.background_asset}`} />
    <div className={`${styles.village} ${styles.background_asset}`} />
    <MarchingBand />
    <div className={`${styles.bonfire} ${styles.background_asset}`} />
    <Army />
    <MusicPlayer onReady={handleMusicReady} />
  </div>
}

export default Scene