<script lang="ts">
  import Spinner from "@lib/components2/Spinner.svelte"
  import Text from "@lib/components2/Text.svelte"
  import QRCode from "@app/components/QRCode.svelte"
  import type {Nip46Controller} from "@app/nip46"

  type Props = {
    controller: Nip46Controller
  }

  const {controller}: Props = $props()
  const {url, loading} = controller
</script>

{#if $url}
  {#if $loading}
    <div class="flex justify-center">
      <Spinner loading>Establishing connection...</Spinner>
    </div>
  {:else}
    <div class="flex flex-col items-center gap-2">
      <QRCode code={$url} />
      <Text size="sm" muted>Scan with your signer to log in, or click to copy.</Text>
    </div>
  {/if}
{/if}
