<script lang="ts">
  import Icon from "@iconify/svelte";
  import "$lib/iconify-offline";
  import QrModal from "./QrModal.svelte";

  let {
    value,
    label = "",
    sublabel = "",
    class: cls = "",
  }: {
    value: string;
    label?: string;
    sublabel?: string;
    class?: string;
  } = $props();

  let open = $state(false);
</script>

<button
  type="button"
  title="QR-Code anzeigen"
  onclick={() => (open = true)}
  class={cls}
>
  <Icon icon="lucide:qr-code" class="size-[1em]" />
</button>

<QrModal value={open ? value : null} {label} {sublabel} onclose={() => (open = false)} />
