<script setup lang="ts">
// types
import type { MaterialFormData } from '~/schemas/material.schema'
import { MaterialSchema } from '~/schemas/material.schema'

const isLoading = ref(false)
const uoms = [
  { value: 'uom-1', label: 'Satuan 1' },
  { value: 'uom-2', label: 'Satuan 2' },
  { value: 'uom-3', label: 'Satuan 3' },
]
const items = [
  { value: 'item-1', label: 'Item 1' },
  { value: 'item-2', label: 'Item 2' },
  { value: 'item-3', label: 'Item 3' },
]

function onBack() {
  navigateTo('/tools-equipment-src/equipment')
}

async function onSubmit(data: MaterialFormData) {
  console.log(data)
}
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
    <Icon name="i-lucide-panel-bottom" class="me-2" />
    <span class="font-semibold">Tambah</span> Perlengkapan (BMHP)
  </div>
  <AppMaterialEntryForm :is-loading="isLoading" :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onBack"
    @submit="onSubmit" />
</template>
