import * as React from "react";
import MenuBackgroundFilter from "../graphics/filters/MenuBackground";
import { Sprite, useApp, useTick } from "@inlet/react-pixi";

export default function () {
  const app = useApp();
  const scale = 2;
  const menubg = new MenuBackgroundFilter(app.renderer, scale);

  useTick((delta) => {
    menubg.update(delta);
    menubg.render();
  });

  window.addEventListener("resize", () => {
    menubg.rescale(scale);
  });

  return <Sprite texture={menubg.texture} scale={{ x: scale, y: scale }} />;
}