function Playground() {
  const instance = useRef(null);
  const [url, setUrl] = useState(null);
  const [code, _setCode] = useState(
    files.src.directory['App.jsx'].file.contents,
  );
  const [error, setError] = useState(null);
  const urlRef = useRef(null);

  const [activePanel, setActivePanel] = useState('code');

  /**
   * Function to update files in the WebContainer.
   */
  const updateFiles = async (updatedCode) => {
    const containerInstance = instance.current;
    const filePath = './src/App.jsx';
    await containerInstance.fs.writeFile(filePath, updatedCode);
  };

  const debouncedUpdateFiles = useDebounced(async (newCode) => {
    await updateFiles(newCode);
  }, 1000);

  /**
   * Function to handle code changes in the CodeMirror editor.
   * @param {string} newCode - The new code content from the editor.
   */
  const handleCodeChange = (newCode) => {
    // setCode(newCode);
    debouncedUpdateFiles(newCode);
  };

  /**
   * Function to reload the WebContainer preview.
   */
  const reloadWebContainer = async () => {
    if (!url) return;
    const iframe = document.querySelector('iframe');
    if (!iframe) return;
    try {
      if (error) {
        setError(null);
      }
      await reloadPreview(iframe);
    } catch (err) {
      console.error(`Error reloading preview: ${err.message}`);
      setError(
        'WebContainer failed to load. Please try reloading or use a different browser.',
      );
    }
  };

  // useEffect to initialize the WebContainer and build it
  useEffect(() => {
    let loadingTimeout;

    /**
     * Function to build the WebContainer and start the development server.
     */
    async function build() {
      const containerInstance = await makeWebcontainer();

      if (!containerInstance) {
        console.log('error due to failed instance');
        setError(
          'WebContainer failed to load. Please try reloading or use a different browser.',
        );
        return;
      }
      instance.current = containerInstance;

      // console.log('Trying to run `npm run dev`...');
      const process = await containerInstance.spawn('npm', ['run', 'dev']);
      // console.log('Spawned `npm run dev`...');
      process.output.pipeTo(
        new WritableStream({
          write(data) {
            console.log(data);
          },
        }),
      );
      // console.log('Waiting for server-ready event...');
      containerInstance.on('server-ready', (port, url) => {
        console.log('server-ready', port, url);
        setUrl(url);
        urlRef.current = url;
      });
    }

    build();

    // Cleanup function to unmount the WebContainer and clear timeouts
    return () => {
      instance.current.unmount();
      if (loadingTimeout != null) {
        clearTimeout(loadingTimeout);
      }
    };
  }, []);

  // Render the Playground component
  return (
    <div {...stylex.props(styles.root)}>
      <div {...stylex.props(styles.headerContainer)}>
        <div {...stylex.props(styles.headerContent)}>
          <div {...stylex.props(styles.desktopHeader)}>
            <span {...stylex.props(styles.headerNote)}>
              Experimental playground - Try a{' '}
              <a
                {...stylex.props(styles.link)}
                href="https://stackblitz.com/edit/vitejs-vite-3vkyxg?file=package.json"
              >
                full example app
              </a>
            </span>
          </div>
          <div {...stylex.props(styles.mobileNav)}>
            <button
              {...stylex.props(
                styles.tabButton,
                activePanel === 'code' && styles.tabButtonActive,
              )}
              onClick={() => setActivePanel('code')}
            >
              Code
            </button>
            <button
              {...stylex.props(
                styles.tabButton,
                activePanel === 'preview' && styles.tabButtonActive,
              )}
              onClick={() => setActivePanel('preview')}
            >
              Preview
              {url && activePanel === 'preview' && (
                <span {...stylex.props(styles.mobileReloadContainer)}>
                  <button
                    {...stylex.props(
                      styles.reloadButton,
                      styles.mobileReloadButton,
                    )}
                    aria-label="Reload preview"
                    onClick={(e) => {
                      e.stopPropagation();
                      reloadWebContainer();
                    }}
                  >
                    <FontAwesomeIcon icon="fa-solid fa-rotate-right" />
                  </button>
                </span>
              )}
            </button>
          </div>
          <div {...stylex.props(styles.desktopReloadContainer)}>
            <button
              {...stylex.props(styles.reloadButton)}
              aria-label="Reload preview"
              onClick={reloadWebContainer}
            >
              <FontAwesomeIcon icon="fa-solid fa-rotate-right" />
            </button>
          </div>
        </div>
      </div>
      <div {...stylex.props(styles.container)}>
        <BrowserOnly>
          {() => (
            <>
              <CodeMirror
                {...stylex.props(
                  styles.panel,
                  activePanel === 'code' && styles.panelActive,
                )}
                onChange={(editor, data, newCode) => handleCodeChange(newCode)}
                options={{
                  mode: 'javascript',
                  theme: 'material-darker',
                  lineNumbers: true,
                }}
                value={code}
              />
              {error ? (
                <div
                  {...stylex.props(
                    styles.panel,
                    activePanel === 'preview' && styles.panelActive,
                    styles.centered,
                  )}
                >
                  {error}
                </div>
              ) : url ? (
                <iframe
                  {...stylex.props(
                    styles.panel,
                    activePanel === 'preview' && styles.panelActive,
                  )}
                  src={url}
                />
              ) : (
                <div
                  {...stylex.props(
                    styles.panel,
                    activePanel === 'preview' && styles.panelActive,
                    styles.centered,
                  )}
                >
                  <LoadingSpinner />
                </div>
              )}
            </>
          )}
        </BrowserOnly>
      </div>
    </div>
  );
}
Main component for the Playground.
@returns {JSX.Element} - The rendered JSX element.