import { Bitcoin, Loader2 } from 'lucide-react';

// The "no wallet selected" and "this backend cannot do that" placeholders.
//
// Deliberately not an error state: with no wallets registered there is nothing wrong, and a section a
// backend does not implement is a fact about the backend, not a failure. The nav hides those sections, so
// UnsupportedSection is only reached by a deep link — which should explain itself rather than 404.

export const EmptyWallet = ({ isLoading = false }: { isLoading?: boolean }) => (
  <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
    {isLoading ? (
      <>
        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
        <p className="text-sm text-muted-foreground">Loading wallets…</p>
      </>
    ) : (
      <>
        <Bitcoin className="h-8 w-8 text-muted-foreground/50" />
        <p className="text-sm font-medium">No wallet yet</p>
        <p className="max-w-sm text-xs text-muted-foreground">
          Add one from the panel on the left — a self-custodial seed sealed under a passphrase, or a connection to a
          node you already run.
        </p>
      </>
    )}
  </div>
);

export const UnsupportedSection = ({ what }: { what: string }) => (
  <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
    <p className="text-sm font-medium">Not available for this wallet</p>
    <p className="max-w-sm text-xs text-muted-foreground">
      This backend does not support {what}. Pick a different wallet from the panel on the left.
    </p>
  </div>
);