<template>
    <div class="card-section space-y-6">
        <p class="text-sm text-gray-400">
            Package dimensions are used to calculate shipping costs.
        </p>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
            <UFormField label="Width (cm)">
                <UInputNumber v-model="store.form.width" :min="0" :step="0.01" class="w-full" />
            </UFormField>
            <UFormField label="Height (cm)">
                <UInputNumber v-model="store.form.height" :min="0" :step="0.01" class="w-full" />
            </UFormField>
            <UFormField label="Depth (cm)">
                <UInputNumber v-model="store.form.depth" :min="0" :step="0.01" class="w-full" />
            </UFormField>
            <UFormField label="Weight (kg)">
                <UInputNumber v-model="store.form.weight" :min="0" :step="0.001" class="w-full" />
            </UFormField>
        </div>

        <UFormField label="Delivery days" hint="Days to ship from local warehouse to customer">
            <UInputNumber v-model="store.form.delivery_days" :min="0" class="w-40" />
        </UFormField>
    </div>
</template>

<script setup lang="ts">
import { useAddProductStore } from '@/stores/admin/addProduct'

const store = useAddProductStore()
</script>
