import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import "@rainbow-me/rainbowkit/styles.css";
import { WalletLoginControls } from "../../components/WalletLoginControls";
import { useI18n } from "../../i18n";
import { wagmiConfig } from "../../wagmiConfig";

export function WalletPage() {
  const { t } = useI18n();

  return (
    <div className="mx-auto max-w-lg space-y-6">
      <h1 className="text-2xl font-bold">{t("walletPageTitle")}</h1>
      <p className="text-neutral-300 text-sm leading-relaxed">
        {t("walletPageIntro")}
      </p>
      <ul className="text-sm text-neutral-400 space-y-2 list-disc pl-5">
        <li>{t("walletStepExtension")}</li>
        <li>{t("walletStepQR")}</li>
        <li>{t("walletStepSign")}</li>
      </ul>
      <div className="rounded-2xl border border-ark-line bg-ark-panel p-6 space-y-4">
        {import.meta.env.VITE_WALLETCONNECT_PROJECT_ID ? (
          <WagmiProvider config={wagmiConfig}>
            <RainbowKitProvider
              theme={darkTheme({
                accentColor: "#d4af37",
                accentColorForeground: "#0a0a0a",
                borderRadius: "medium",
              })}
              modalSize="wide"
            >
              <WalletLoginControls />
            </RainbowKitProvider>
          </WagmiProvider>
        ) : (
          <p
            className="text-sm text-amber-500/90 leading-relaxed"
            title={t("walletMissingProjectId")}
          >
            {t("walletSetupNeeded")}
          </p>
        )}
      </div>
    </div>
  );
}