/**
 * @fileoverview React component for LabPython.jsx
 * 
 * @module pages.LabPython.LabPython
 */

import GameNavBar from "../../components/game/GameNavBar";
import { useIsMobile } from "../../hooks/useIsMobile";
import DesktopOnlyTapume from "../../components/DesktopOnlyTapume";

export default function LabPython() {
  const isSmallScreen = useIsMobile(1024);
  
  if (isSmallScreen) {
    return (
      <div className="w-screen h-screen flex flex-col overflow-hidden">
        <GameNavBar title="Laboratório" type="code" />
        <DesktopOnlyTapume
          title="Laboratório disponível apenas no desktop"
          message="O Playground foi preparado para uso em telas maiores. Para editar e visualizar o código com conforto, acesse por um computador."
        />
      </div>
    );
  }

  return (
    <div
      className={`w-screen h-screen flex flex-col overflow-hidden transition-colors duration-300`}
    >
      <GameNavBar title="Laboratório Python" type="code" />

      <div className="flex-1 overflow-hidden">
        <iframe
          src="/jupyter/"
          title="JupyterLite Lab"
          className="w-full h-full border-0"
          allowFullScreen
          sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
        />
      </div>
    </div>
  );
}
