<script lang="ts">
  import BalanceDisplay from "$lib/components/BalanceDisplay.svelte";
  import PaymentHistory from "$lib/components/PaymentHistory.svelte";
  import ReceiveDialog from "$lib/components/ReceiveDialog.svelte";
  import SendDialog from "$lib/components/SendDialog.svelte";
  import Button from "$lib/components/Button.svelte";

  let receiveDialogOpen = $state(false);
  let sendDialogOpen = $state(false);

  function openReceiveDialog() {
    receiveDialogOpen = true;
  }

  function openSendDialog() {
    sendDialogOpen = true;
  }
</script>

<ReceiveDialog bind:open={receiveDialogOpen} />
<SendDialog bind:open={sendDialogOpen} />

<div class="container">
  <BalanceDisplay />
  <div class="retro-card send-receive-buttons">
    <Button variant="primary" onclick={openReceiveDialog}>Receive</Button>
    <Button variant="danger" onclick={openSendDialog}>Send</Button>
  </div>

  <PaymentHistory />
</div>
