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

interface Props {
    form: FixedAssetFormData;
}

defineProps<Props>();

const categoryOptions = [
    { label: 'Seleccione una categoria', value: '' },
    { label: 'Computo', value: 'Computo' },
    { label: 'Maquinaria', value: 'Maquinaria' },
    { label: 'Mobiliario', value: 'Mobiliario' },
    { label: 'Infraestructura TI', value: 'Infraestructura TI' }
];
</script>

<template>
    <Card class="shadow-sm">
        <template #title>
            <div class="flex items-center gap-2 text-xl">
                <i class="pi pi-info-circle text-primary"></i>
                <span>Informacion General</span>
            </div>
        </template>
        <template #content>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div class="space-y-2 md:col-span-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">
                        Nombre del Activo *
                    </label>
                    <InputText
                        v-model="form.name"
                        class="w-full"
                        placeholder="Ej: Montacargas Electrico Toyota"
                    />
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">
                        Numero de Serie / Serial *
                    </label>
                    <InputText
                        v-model="form.serial"
                        class="w-full"
                        placeholder="SN-123456789"
                    />
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">
                        Categoria
                    </label>
                    <Select
                        v-model="form.category"
                        :options="categoryOptions"
                        optionLabel="label"
                        optionValue="value"
                        class="w-full"
                    />
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">
                        Marca
                    </label>
                    <InputText
                        v-model="form.brand"
                        class="w-full"
                        placeholder="Ej: Toyota, Dell, Bosch"
                    />
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-semibold text-surface-800 dark:text-surface-100">
                        Modelo
                    </label>
                    <InputText
                        v-model="form.model"
                        class="w-full"
                        placeholder="Ej: Series-X 2023"
                    />
                </div>
            </div>
        </template>
    </Card>
</template>
