'use client';
import { AppRoutes } from './AppRoutes';
import {
  AppContainer,
  AppExpandedContainer,
  FlexContainer,
} from './components/AppContainer';
import { Header } from './components/Header';
import { Initializer } from './components/Initializer';
import { PoweredBy } from './components/PoweredBy';
import { RoutesExpanded } from './components/Routes';
import { useExpandableVariant } from './hooks';
import { useWidgetConfig } from './providers';
import { ElementId, createElementId } from './utils';

export const AppDefault = () => {
  const { elementId } = useWidgetConfig();
  const expandable = useExpandableVariant();

  return (
    // <AppExpandedContainer
    //   id={createElementId(ElementId.AppExpandedContainer, elementId)}
    // >
    <AppContainer>
      <Header />
      <FlexContainer disableGutters>
        <AppRoutes />
      </FlexContainer>
      <PoweredBy />
      <Initializer />
    </AppContainer>
    // {expandable ? <RoutesExpanded /> : null}
    // </AppExpandedContainer>
  );
};