<script setup lang="ts">
import Card from 'primevue/card';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import Textarea from 'primevue/textarea';
import type { FixedAssetAssignmentFormData } from '../../types/fixedAssetAssignment';

interface Props {
    form: FixedAssetAssignmentFormData;
}

defineProps<Props>();

const conditionOptions = [
    { label: 'Excelente', value: 'Excelente' },
    { label: 'Bueno', value: 'Bueno' },
    { label: 'Regular', value: 'Regular' }
];
</script>

<template>
    <Card class="shadow-sm">
        <template #title>
            <div class="flex items-center gap-2 text-xl">
                <i class="pi pi-clipboard text-primary"></i>
                <span>Detalles de la Asignacion</span>
            </div>
        </template>
        <template #content>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">Fecha de Entrega</label>
                    <InputText
                        v-model="form.deliveredAt"
                        type="date"
                        class="w-full"
                    />
                </div>
                <div class="space-y-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">Condicion del Activo</label>
                    <Select
                        v-model="form.condition"
                        :options="conditionOptions"
                        optionLabel="label"
                        optionValue="value"
                        class="w-full"
                    />
                </div>
                <div class="space-y-2 md:col-span-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">Notas o Comentarios (Opcional)</label>
                    <Textarea
                        v-model="form.notes"
                        rows="4"
                        class="w-full"
                        autoResize
                        placeholder="Anade detalles relevantes sobre el estado de entrega o terminos especificos..."
                    />
                </div>
            </div>
        </template>
    </Card>
</template>
