"use client";

import { useState } from "react";

import SettingsSidebar from "../../../components/table/features/settings/components/SettingsSidebar";
import PlatformSettings from "../../../components/table/features/settings/components/PlatformSettings";
import PaymentSettings from "../../../components/table/features/settings/components/PaymentSettings";
import SightEngineSettings from "../../../components/table/features/settings/components/SightEngineSettings";
import SocialMediaSettings from "../../../components/table/features/settings/components/SocialMediaSettings";
import { SettingsTab } from "../../../components/table/features/settings/types/settings";
import SecuritySettings from "../../../components/table/features/settings/components/SecuritySettings";

const SettingsComponents: Record<SettingsTab, React.ComponentType> = {
  platform: PlatformSettings,
  payment: PaymentSettings,
  "sight-engine": SightEngineSettings,
  "social-media": SocialMediaSettings,
  security: SecuritySettings,
};

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState<SettingsTab>("platform");

  return (
    <section className="p-4 md:p-6 pt-6 2xl:pt-10 2xl:p-10">
      <h1 className="font-body text-base lg:text-lg xl:text-xl 2xl:text-28 font-semibold xl:leading-9.5 text-heading mb-5">
        System Settings
      </h1>
      <div className="grid gap-6 2xl:grid-cols-[360px_1fr]">
        <SettingsSidebar activeTab={activeTab} onChange={setActiveTab} />

        {(() => {
          const Component = SettingsComponents[activeTab];
          return Component ? <Component /> : null;
        })()}

        {/* {activeTab === "platform" && <PlatformSettings />}

        {activeTab === "payment" && <PaymentSettings />}

        {activeTab === "sight-engine" && <SightEngineSettings />}

        {activeTab === "social-media" && <SocialMediaSettings />}

        {activeTab === "security" && (
          <>
            <SecuritySettings />
          </>
        )} */}
      </div>
    </section>
  );
}