
import React, { ReactElement } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import PageBuilder from '../../components/Pages/PageBuilder';
import { getPageTitle } from '../../config';

const BuilderPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <>
      <Head>
        <title>{getPageTitle('Page Builder')}</title>
      </Head>
      {id && <PageBuilder pageId={id as string} />}
    </>
  );
};

BuilderPage.getLayout = function getLayout(page: ReactElement) {
  // We don't use the standard Authenticated layout because the builder 
  // needs a custom full-screen UI without the standard sidebar/navbar.
  // However, we still want auth. A better approach is a dedicated 
  // "BuilderLayout" or just checking auth inside. 
  // For now, let's keep it simple and ensure the user is logged in 
  // if needed by checking in the component.
  return page;
};

export default BuilderPage;
