<template>
    <div class="card-section space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <UFormField label="Visibility">
                <USelect v-model="store.form.visibility" :options="visibilityOptions" value-key="value"
                    label-key="label" class="w-full" />
            </UFormField>

            <UFormField label="Condition">
                <USelect v-model="store.form.condition" :options="conditionOptions" value-key="value"
                    label-key="label" class="w-full" />
            </UFormField>

            <UFormField label="EAN-13 / JAN barcode">
                <UInput v-model="store.form.ean13" placeholder="4006381333931" :maxlength="13" class="w-full" />
            </UFormField>

            <UFormField label="UPC barcode">
                <UInput v-model="store.form.upc" placeholder="012345678905" :maxlength="12" class="w-full" />
            </UFormField>

            <UFormField label="ISBN">
                <UInput v-model="store.form.isbn" placeholder="978-3-16-148410-0" :maxlength="32"
                    class="w-full" />
            </UFormField>
        </div>
    </div>
</template>

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

const store = useAddProductStore()

const visibilityOptions = [
    { value: 'both', label: 'Everywhere (catalog & search)' },
    { value: 'catalog', label: 'Catalog only' },
    { value: 'search', label: 'Search only' },
    { value: 'none', label: 'Hidden' },
]

const conditionOptions = [
    { value: 'new', label: 'New' },
    { value: 'used', label: 'Used' },
    { value: 'refurbished', label: 'Refurbished' },
]
</script>
