<script setup lang="ts">
import Card from 'primevue/card';
import FileUpload from 'primevue/fileupload';
import type { FixedAssetFormData } from '../../types/fixedAsset';

interface Props {
    form: FixedAssetFormData;
}

const props = defineProps<Props>();

const onSelectFile = (event: { files: File[] }) => {
    const file = event.files?.[0];
    props.form.imageFileName = file ? file.name : '';
};
</script>

<template>
    <Card class="shadow-sm h-full">
        <template #title>
            <div class="flex items-center gap-2 text-xl">
                <i class="pi pi-image text-primary"></i>
                <span>Imagen del Activo</span>
            </div>
        </template>
        <template #content>
            <div class="space-y-4">
                <FileUpload
                    mode="basic"
                    name="fixed-asset-image"
                    accept="image/png,image/jpeg"
                    :maxFileSize="5000000"
                    chooseLabel="Subir Imagen"
                    class="w-full"
                    @select="onSelectFile"
                />

                <div class="upload-dropzone">
                    <i class="pi pi-upload text-3xl text-surface-400"></i>
                    <p class="mt-2 text-sm font-semibold text-surface-700 dark:text-surface-200">Subir Imagen</p>
                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">PNG, JPG hasta 5MB</p>
                </div>

                <div class="rounded-lg bg-surface-100 px-3 py-2 text-xs text-surface-500 dark:bg-surface-800 dark:text-surface-400">
                    {{ form.imageFileName || 'No seleccionado' }}
                </div>
            </div>
        </template>
    </Card>
</template>

<style scoped>
.upload-dropzone {
    border: 1px dashed var(--p-surface-300);
    border-radius: 0.75rem;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}
</style>
