<script lang="ts">
  import Button from "$lib/components/Button.svelte";
  import { redeemToken } from "$lib/cashu.svelte";

  let tokenInput = $state("");

  function redeem() {
    redeemToken(tokenInput).catch((e) => alert(e.message));
    tokenInput = "";
  }
</script>

<h4>Redeem Cashu Token</h4>
<textarea bind:value={tokenInput} placeholder="Paste Cashu token here" rows="3"
></textarea>
<Button onclick={redeem}>Redeem</Button>

<style>
  textarea {
    width: 100%;
    margin: 0.8rem 0;
    font-family: monospace;
    padding: 0.5rem;
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    background: var(--surface-alt-color);
    color: var(--text-color);
  }
</style>
