<script setup lang="ts">
import { ref } from 'vue'
import Dropzone from '~/components/ui/dropzone/Dropzone.vue'

const files = ref<File[]>([])

const handleDrop = (acceptedFiles: File[], event: DragEvent) => {
    console.log('Files dropped:', acceptedFiles)
}

const handleError = (error: Error) => {
    console.error('Dropzone error:', error.message)
}
</script>

<template>
    <div class="flex-1">
        <NuxtLayout name="default">
            <template #header>
                <Outline side="bottom" padding="dense" class="w-full">
                    <div class="flex gap-8 w-full items-center">
                        <SidebarTrigger :size="5" />
                        <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
                            Modify
                        </h2>
                    </div>
                </Outline>
            </template>
            <div class="w-full">
                <Dropzone :src="files" :accept="{
                    'image/*': ['.png', '.jpg', '.jpeg', '.gif']
                }" :max-size="5 * 1024 * 1024" :min-size="1024" :max-files="3" @drop="handleDrop" @error="handleError"
                    class="w-full max-w-md" />
            </div>
        </NuxtLayout>
    </div>
</template>
