"use client";

import { useTranslation } from "react-i18next";

import { PlayerPanel } from "@/components/layout/player-panel";
import { Skeleton } from "@/components/ui/skeleton";
import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
import { usePlayerSessionStore } from "@/stores/player-session-store";

type WalletTransferLoadingPanelProps = {
  titleKey: "wallet.transferInTitle" | "wallet.transferOutTitle";
};

export function WalletTransferLoadingPanel({ titleKey }: WalletTransferLoadingPanelProps) {
  const { t } = useTranslation("player");
  const creditMode = isCreditFundingPlayer(usePlayerSessionStore((state) => state.profile));
  const backLabel = creditMode
    ? t("wallet.creditTitle", { defaultValue: "信用" })
    : t("wallet.title");

  return (
    <PlayerPanel title={t(titleKey)} backHref="/wallet" backLabel={backLabel}>
      <div className="space-y-3">
        <Skeleton className="h-8 w-40" />
        <Skeleton className="h-48 w-full rounded-xl" />
      </div>
    </PlayerPanel>
  );
}