export const title = "Pay Foster Hangdaan";
export const description =
  "This site lists payment methods for making payments or donations to Foster Hangdaan.";
export const layout = "layout.tsx";

const crypto = [
  {
    name: "Monero",
    icon:
      "https://static.fosterhangdaan.com/icons/simple-icons/v10.2.0/monero.svg",
    qrcode: "images/xmr-address.svg",
    address:
      "47fQTNLjXUPPmjcB4eU3kuSwyHkpioms77XUjdCKMKPs6jwNNEfFpEYZM4sZi9NwZHHeJD3prgLTC66E2skbvzTm1jiXb1R",
    preferred: true,
  },
  {
    name: "Bitcoin",
    icon:
      "https://static.fosterhangdaan.com/icons/simple-icons/v10.2.0/bitcoin.svg",
    qrcode: "images/btc-address.svg",
    address: "bc1q3w9e0zm9ez24c8hhhfyamgchfvf9x85ean5wqr",
  },
];

export default function Home(data: Lume.Data, _helpers: Lume.Helpers) {
  return (
    <div class="home-container">
      <h1>{data.title}</h1>
      <div class="preamble">
        <p>
          This site lists the methods for sending payments or donations to{" "}
          <a href="https://www.fosterhangdaan.com">Foster Hangdaan</a>.
        </p>
        <p>
          I currently only accept cryptocurrency donations. My wallet addresses
          are listed below:
        </p>
      </div>
      <ul>
        <li>
          <details>
            <summary>
              <img
                class="icon"
                src="https://static.fosterhangdaan.com/icons/tabler-icons/v3.0.0/svg/outline/wallet.svg"
              />
              <span>OpenAlias</span>
            </summary>
            <div class="content">
              <p>
                If your crypto wallet supports{" "}
                <a href="https://openalias.org/">OpenAlias</a>, you can simply
                send a payment to the address below:
              </p>
              <pre>pay.fosterhangdaan.com</pre>
            </div>
          </details>
        </li>
        {crypto.sort((a, b) => {
          return a.name > b.name ? 1 : -1;
        }).map((c) => (
          <li>
            <details>
              <summary>
                <img
                  class="icon"
                  src={c.icon}
                />
                <span>{c.name}</span>
                {c.preferred && <div class="tag">preferred</div>}
              </summary>
              <div class="content">
                <img class="qrcode" src={c.qrcode} />
                <pre>
                  {c.address}
                </pre>
              </div>
            </details>
          </li>
        ))}
      </ul>
    </div>
  );
}