import { Bitcoin } from 'lucide-react';
import { WALLET_SECTIONS } from './shared';
import { Amount, UnitToggle } from './Amount';
import { LockBadge } from './LockBadge';
import { useWalletSection } from './useWalletSection';
import { useSelectedWallet } from './useSelectedWallet';
import { useBalances } from './useWalletData';

// Panel header for the right (wallet-view) panel: which section, which wallet, the spendable balance and
// the lock state. The lock indicator is compact here — it reports, it does not act, because the actions
// live in the nav and on the signing surfaces themselves.

export const WalletViewHeader = () => {
  const section = useWalletSection();
  const { wallet, walletId } = useSelectedWallet();
  const { balances } = useBalances(walletId);
  const label = WALLET_SECTIONS.find((s) => s.id === section)?.label ?? 'Wallet';

  return (
    <>
      <Bitcoin className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">
        {label}
        {wallet && <span className="ml-1.5 font-normal text-muted-foreground">· {wallet.name}</span>}
      </span>
      {balances && <Amount sats={balances.onchainConfirmed} className="shrink-0 text-[10px] text-muted-foreground" />}
      <UnitToggle className="shrink-0" />
      <LockBadge walletId={walletId} walletName={wallet?.name ?? 'this wallet'} compact />
    </>
  );
};