<script lang="ts">
  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
  import QRCode from "@app/components/QRCode.svelte"

  type Props = {
    code: string
  }

  const {code}: Props = $props()

  const back = () => history.back()
</script>

<Modal>
  <ModalBody>
    <div class="col-4 items-center text-center">
      <strong>Profile QR Code</strong>
      <QRCode {code} class="max-w-64" />
      <p class="break-all text-sm opacity-75">{code}</p>
      <p class="text-sm opacity-75">Tap the QR code to copy this npub.</p>
    </div>
  </ModalBody>
  <ModalFooter>
    <Button onclick={back} class="hidden md:btn md:btn-link">
      <Icon icon={AltArrowLeft} />
      Go back
    </Button>
    <Button onclick={back} class="btn btn-neutral">Close</Button>
  </ModalFooter>
</Modal>
