---
import { Icon } from 'astro-icon/components'
import * as 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: 256,
  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="cursor-pointer px-7 font-mono text-base leading-snug tracking-wide break-all text-white select-all"
    >
      {
        address.length > 12
          ? [
              <span class="mr-0.5 font-bold text-green-500">{address.substring(0, 6)}</span>,
              address.substring(6, address.length - 6),
              <span class="ml-0.5 font-bold text-green-500">{address.substring(address.length - 6)}</span>,
            ]
          : address
      }
    </p>
  </div>
  <img
    src={qrCodeDataURL}
    alt={`${cryptoName} QR code`}
    width="128"
    height="128"
    class="mr-4 hidden size-32 rounded sm:block"
  />
</div>