<script setup lang="ts">
import {
    Field,
    FieldError,
    FieldLabel,
} from '@/components/ui/field';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { formErrors, type FormWithErrors } from '@/lib/form';
import type { SelectOption } from '@/types/purchase';

defineProps<{
    form: FormWithErrors & { supplier_id: string };
    suppliers: SelectOption[];
}>();
</script>

<template>
    <Field>
        <FieldLabel for="supplier" required>Supplier</FieldLabel>
        <Select v-model="form.supplier_id">
            <SelectTrigger id="supplier" class="w-full">
                <SelectValue placeholder="Pilih supplier" />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem
                        v-for="supplier in suppliers"
                        :key="supplier.value"
                        :value="String(supplier.value)"
                    >
                        {{ supplier.label }}
                    </SelectItem>
                </SelectGroup>
            </SelectContent>
        </Select>
        <FieldError :errors="formErrors(form, 'supplier_id')" />
    </Field>
</template>
