<template>
<!--  <form @submit.prevent="handleDeposit()" class="form">-->
  <form @submit.prevent="" class="form">
    <div class="form__box">
      <ui-input
          :type="'text'"
          :placeholder="''"
          v-model="amount"
          :numberOnly="true"
      />
      <ui-input
          :type="'text'"
          :placeholder="''"
          v-model="amount"
          :numberOnly="true"
      />
    </div>
<!--    <ui-button-->
<!--        class="form__button"-->
<!--        :isDisabled="!isFormValid"-->
<!--        :isLoading="loading"-->
<!--    >-->
<!--      {{ $t('buttons.topUp') }}-->
<!--    </ui-button>-->
    <ui-button
        class="form__button"
        :isDisabled="!isFormValid"
    >
      {{ t('buttons.topUp') }}
    </ui-button>
  </form>
</template>

<script setup>
// import {useDeposit} from "@/composables/user/useDeposit.js";

const { t } = useI18n()
const companyStore = useCompanyStore()

const paymentMin = computed(() => companyStore.companyInfo?.paymentGatewayMinimum)
const paymentMax = computed(() => companyStore.companyInfo?.paymentGatewayMaximum)

const amount = ref('')

const isFormValid = computed(() => {
  return (
    amount.value >= paymentMin.value &&
    amount.value <= paymentMax.value
  )
})

// const { deposit, loading } = useDeposit();
//
// async function handleDeposit() {
//   await deposit(amount.value);
// }
</script>

<style lang="scss" scoped>
.form {
  &__box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
}
</style>