<script lang="ts">
  import { encode } from "uqr";

  const QUIET_ZONE = 2;

  let { value, label }: { value: string; label: string } = $props();

  const code = $derived.by(() => {
    const qr = encode(value, { ecc: "M", border: 0 });
    const path = qr.data
      .flatMap((row, y) =>
        row.flatMap((filled, x) => (filled ? [`M${x} ${y}h1v1h-1z`] : []))
      )
      .join("");
    return { extent: qr.size + QUIET_ZONE * 2, path };
  });
</script>

<svg
  class="qr"
  viewBox="0 0 {code.extent} {code.extent}"
  role="img"
  aria-label={label}
>
  <rect width={code.extent} height={code.extent} fill="var(--qr-bg, #fff)" />
  <path
    d={code.path}
    fill="var(--qr-fg, #000)"
    transform="translate({QUIET_ZONE} {QUIET_ZONE})"
  />
</svg>

<style lang="scss">
  .qr {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
  }
</style>
