<script setup>

    const image = useState('carImage',() => {
        return {
            preview:null,
            image:null
        }
    });

    const emit = defineEmits(['changeInput']);

    const props = defineProps({
        title:String,
        name:String        
    });

    const onImageUpload = (event) => {
        const input = event.target;
        if(input.files){
            const reader= new FileReader();
            reader.onload = (e) => {
                image.value.preview = e.target.result;
            };
            image.value.image = input.files[0];
            reader.readAsDataURL(input.files[0]);
            emit("changeInput",input.files[0],"image");
        }
    };
</script>

<template>
    <div class="col-md5 offset-md-1 mt-2 w-[100%]">
        <label class="text-cyan-500 mb-q text-sm">{{ title }}</label>
        <form class="mt-2">
            <div class="form-group">
                <div class="relative">
                    <input class="opacity-0 absolute cursor-pointer" 
                            type="file" accept="image/*"
                            @change="onImageUpload"
                    />
                    <span class="cursor-pointer">Browse file</span>
                </div>
                <div class="border p-2 mt-3 w-56" v-if="image.preview">
                    <img :src="image.preview" class="img-fluid" alt="">
                </div>
            </div>
        </form>
    </div>
</template>