<script setup>
import SingleFile from '@Holos/Form/SingleFile.vue';
import Error from '@Holos/Form/Elements/Error.vue';

defineProps({
  modelValue: [Object, File, String],
  required: Boolean,
  title: { type: String, default: '' },
  onError: [String, Array],
  accept: { type: String, default: 'image/png, image/jpeg' },
});

const emit = defineEmits(['update:modelValue']);
</script>

<template>
  <div class="flex flex-col">
    <SingleFile
      :model-value="modelValue"
      :title="title"
      :required="required"
      :accept="accept"
      @update:model-value="emit('update:modelValue', $event)"
    >
      <template #previous>
        <slot name="previous" />
      </template>
    </SingleFile>
    <Error :onError="onError" />
  </div>
</template>
