import leftmouse from "/mouse.svg";
import scroll from "/scroll.svg";
import space from "/space.svg";
import { state } from "@/utils";

export function Helper() {
  const { replay } = state();

  if (!replay) return <></>;

  return (
      <div className="flex flex-col absolute right-10 top-16 gap-2 items-end">
          <div className="flex gap-2 text-xs items-center">
              Drag Playfield
              <img src={leftmouse}/>
          </div>
          <div className="flex gap-2 text-xs items-center">
              Zoom
              <img src={scroll}/>
          </div>
          <div className="flex gap-2 text-xs items-center">
              Pause/Play
              <img src={space}/>
          </div>
      </div>
  );

}
