"use client";

import { WalletConfigDocScreen } from "@/modules/config/doc/wallet-config-doc-screen";
import { AdminPageCard } from "@/components/admin/admin-page-card";
import { AdminSettingsDataProvider } from "@/modules/settings/admin-settings-data-context";
import { DrawSettingsPanel } from "@/modules/settings/panels/draw-settings-panel";
import { FrontendSettingsPanel } from "@/modules/settings/panels/frontend-settings-panel";
import { SettlementSettingsPanel } from "@/modules/settings/panels/settlement-settings-panel";
import { useTranslation } from "react-i18next";

function SystemSettingsContent() {
  const { t } = useTranslation(["config"]);

  return (
    <div className="flex w-full max-w-none flex-col gap-6">
      <h1 className="text-lg font-semibold tracking-tight">{t("system.pageTitle")}</h1>

      <DrawSettingsPanel />
      <SettlementSettingsPanel />

      <AdminPageCard
        title={t("wallet.title", { ns: "config" })}
        description={t("wallet.description", { ns: "config" })}
      >
        <WalletConfigDocScreen embedded />
      </AdminPageCard>

      <FrontendSettingsPanel />
    </div>
  );
}

export function SystemSettingsScreen() {
  return (
    <AdminSettingsDataProvider>
      <SystemSettingsContent />
    </AdminSettingsDataProvider>
  );
}
