/**
 * Stage Presentation Page
 * URL: /p/[projectSlug]/stage (e.g., /p/cardiff/stage)
 */

import { ReactElement } from 'react';
import { useRouter } from 'next/router';
import RuntimePresentation from '../../../components/RuntimePresentation';
import LayoutAuthenticated from '../../../layouts/Authenticated';

export default function StagePresentation() {
  const router = useRouter();
  const { projectSlug } = router.query;

  if (!projectSlug || typeof projectSlug !== 'string') {
    return (
      <div className='flex items-center justify-center min-h-screen bg-gray-900'>
        <div className='text-white'>Loading...</div>
      </div>
    );
  }

  return <RuntimePresentation projectSlug={projectSlug} environment='stage' />;
}

StagePresentation.getLayout = function getLayout(page: ReactElement) {
  return (
    <LayoutAuthenticated permission='READ_TOUR_PAGES' minimal>
      {page}
    </LayoutAuthenticated>
  );
};
