<script setup>
import {
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from '@/components/ui/form'
import Input from '../ui/input/Input.vue';

const props = defineProps({
    name: {
        type: String,
        required: true
    },
    description: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: ''
    },
    readOnly: {
        type: Boolean,
        default: false
    }
});

</script>

<template>
    <FormField :name="props.name" v-slot="{ value, handleChange }">
        <FormItem>
            <FormLabel>{{ props.label }}</FormLabel>
            <FormDescription>{{ props.description }}</FormDescription>
            <FormControl>
                <Input :model-value="value" @update:model-value="handleChange" :disabled="props.readOnly" />
            </FormControl>
            <FormMessage />
        </FormItem>
    </FormField>
</template>