---
import { Icon } from 'astro-icon/components'
import QRCode from 'qrcode'

import { cn } from '../lib/cn'

type Props = {
  cryptoName: string
  cryptoIcon: string
  address: string
  className?: string
}

const { cryptoName, cryptoIcon, address, className } = Astro.props

function getAddressURI(address: string, cryptoName: string) {
  if (cryptoName.toLowerCase() === 'monero') {
    return `monero:${address}?tx_description=KYCnot.me%20Donation`
  }

  if (cryptoName.toLowerCase() === 'bitcoin') {
    return `bitcoin:${address}?label=KYCnot.me%20Donation`
  }

  return address
}

const qrCodeDataURL = await QRCode.toDataURL(getAddressURI(address, cryptoName), {
  width: 128,
  margin: 1,
  color: {
    dark: '#ffffff',
    light: '#171721',
  },
})
---

<div class={cn('bg-night-800 border-night-600 flex items-center gap-2 rounded-lg border px-3', className)}>
  <div class="flex flex-1 flex-col gap-1 py-3">
    <div class="flex items-center gap-2 px-4 pt-3">
      <Icon name={cryptoIcon} class="size-6 text-white" />
      <span class="font-title text-base font-semibold text-white">{cryptoName}</span>
    </div>
    <p class="px-7 font-mono text-base leading-snug tracking-wide break-all text-white">
      <span
        class="cursor-pointer select-all"
        set:html={address.length > 12
          ? `<span class="font-bold mr-0.5 text-green-500">${address.substring(0, 6)}</span>${address.substring(6, address.length - 6)}<span class="font-bold ml-0.5 text-green-500">${address.substring(address.length - 6)}</span>`
          : `<span class="font-bold">${address}</span>`}
      />
    </p>
  </div>
  <img
    src={qrCodeDataURL}
    alt={`${cryptoName} QR code`}
    width="128"
    height="128"
    class="mr-4 hidden size-36 rounded sm:block"
  />
</div>