import { Route, Routes } from 'react-router-dom';

import { Links } from '../../types/types';

import Setup from '../Setup';
import ChatBotCustomizer from '../ChatBotCustomizer';
import Wrapper from './wrapper';
import PremiumFeatures from '../PremiumFutures';
import ActivatePremium from '../ActivatePremium';

export default function ContentPane({ links }: { links: Links }) {
  return (
    <Routes>
      <Route
        path={links[0].path}
        element={
          <Wrapper title={links[0].title}>
            <Setup />
          </Wrapper>
        }
      />
      <Route
        path={links[1].path}
        element={
          <Wrapper title={links[1].title}>
            <ChatBotCustomizer />
          </Wrapper>
        }
      />
      <Route
        path={links[2].path}
        element={
          <Wrapper title={links[2].title}>
            <PremiumFeatures />
          </Wrapper>
        }
      />
      <Route
        path={links[3].path}
        element={
          <Wrapper title={links[3].title}>
            {links[3].component ? links[3].component : <ActivatePremium />}
          </Wrapper>
        }
      />
    </Routes>
  );
}