import { WalletLoginControls } from "../components/WalletLoginControls";
import { useI18n } from "../i18n";

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">
        <WalletLoginControls />
      </div>
    </div>
  );
}