import { observer } from "mobx-react";
import { Suspense } from "react";
// buzzwareTech imports
import { ScrollArea } from "@buzzwaretech/propel/scrollarea";
import type { TProfileSettingsTabs } from "@buzzwaretech/types";
import { cn } from "@buzzwaretech/utils";
// local imports
import { PROFILE_SETTINGS_PAGES_MAP } from "./pages";

type Props = {
  activeTab: TProfileSettingsTabs;
  className?: string;
};

export const ProfileSettingsContent = observer(function ProfileSettingsContent(
  props: Props,
) {
  const { activeTab, className } = props;
  const PageComponent = PROFILE_SETTINGS_PAGES_MAP[activeTab];

  return (
    <ScrollArea
      className={cn("shrink-0 overflow-y-scroll bg-surface-1", className)}
      viewportClassName="px-8 py-9"
      scrollType="hover"
      orientation="vertical"
      size="sm"
    >
      <Suspense>
        <PageComponent />
      </Suspense>
    </ScrollArea>
  );
});