import { WebConsoleController } from "@/components/web-console/controller";
import { useLayoutEffect, useRef } from "react";
import "@xterm/xterm/css/xterm.css";
import "./web-console.css";

export function WebConsole({
  controller,
}: {
  controller: WebConsoleController;
}) {
  const containerRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const container = containerRef.current;

    if (container) {
      controller.bind(container);
      return () => {
        controller.unbind();
      };
    }
  }, [controller]);
  return (
    <div
      ref={containerRef}
      className="web-console size-full"
      onScroll={(e) => e.stopPropagation()}
    />
  );
}