import { useParams } from 'react-router';
import { lazy, Suspense } from 'react';
import { Spinner } from '@cameleer/design-system';

const AgentHealth = lazy(() => import('../AgentHealth/AgentHealth'));
const AgentInstance = lazy(() => import('../AgentInstance/AgentInstance'));

const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;

export default function RuntimePage() {
  const { instanceId } = useParams<{ appId?: string; instanceId?: string }>();

  if (instanceId) {
    return <Suspense fallback={Fallback}><AgentInstance /></Suspense>;
  }
  return <Suspense fallback={Fallback}><AgentHealth /></Suspense>;
}