import React, { useEffect } 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();
  });

  useEffect(() => {
    const handleResize = () => {
      menubg.rescale(scale);
    };
    app.renderer.on("resize", handleResize);
    return () => {
      app.renderer.off("resize", handleResize);
    };
  });

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