import React from 'react';
import { useRouter } from 'next/router';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import * as icon from '@mdi/js';
import LayoutAuthenticated from '../layouts/Authenticated';

const stubTitles: Record<string, { title: string; icon: string }> = {
  'overview/web-terminal': { title: 'Web Terminal Overview', icon: icon.mdiMonitorClassic },
  'strategy-builder': { title: 'Strategy Builder', icon: icon.mdiPuzzleOutline },
  'trading-demo': { title: 'Trading Demo Account', icon: icon.mdiBank },
  'copy-trading': { title: 'Copy Trading', icon: icon.mdiAccountSwitch },
  'api-integration': { title: 'API Integration', icon: icon.mdiApi },
  'corporate-events': { title: 'Corporate Events', icon: icon.mdiCalendar },
  'financial-instruments': { title: 'Financial Instruments', icon: icon.mdiChartBox },
  'stocks-trader-app': { title: 'StocksTrader App', icon: icon.mdiCellphoneLink },
  'faq': { title: 'FAQ', icon: icon.mdiHelpCircle },
  'latest-updates': { title: 'Latest Updates', icon: icon.mdiUpdate }
};

const StubPage: React.FC = () => {
  const router = useRouter();
  const { slug } = router.query;
  const slugArray = Array.isArray(slug) ? slug : slug ? [slug] : [];
  const path = slugArray.join('/');
  const stub = stubTitles[path];

  if (!stub) {
    return <p>404 - Page Not Found</p>;
  }

  return (
    <SectionMain>
      <SectionTitleLineWithButton icon={stub.icon} title={stub.title} main />
      <p>Coming soon: {stub.title} section.</p>
    </SectionMain>
  );
};

StubPage.getLayout = (page: React.ReactElement) => <LayoutAuthenticated>{page}</LayoutAuthenticated>;

export default StubPage;