<template>
  <div class="balance">
    <h2>{{ t('profile.balance.title') }}: {{ user?.balance.amount }}</h2>
    <forms-deposit />
  </div>
</template>

<script setup lang="ts">
import {usePageTitle} from '@composables/utils';

const {t} = useI18n();
const userStore = useUserStore();

const user = computed(() => userStore.user);

const { setPageTitle } = usePageTitle();

setPageTitle(t('breadcrumbs.balance'));
</script>

<style lang="scss" scoped>
.balance {
  background-color: $white;
  width: 100%;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: $default_border_radius;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
</style>