<script lang="ts" setup>
import Modal from '../components/Modal.vue';
import { ref } from "vue";
import { useBudgetsStore } from '../stores/budget';
import Input from '../components/Input.vue';

const budgetName = ref("");
function saveBudget() {
  useBudgetsStore().NewBudget(budgetName.value);
};
</script>

<template>
  <Modal
    button-text="New Budget"
    @submit="saveBudget"
  >
    <div class="mt-2 px-7 py-3">
      <Input
        v-model="budgetName"
        class="border-2"
        type="text"
        placeholder="Budget name"
        required
      />
    </div>
  </Modal>
</template>
