<script setup lang="ts">
import { ResumeInputData } from '@/types/resume';
import { defineAsyncComponent } from 'vue';
import Label from '../ui/label/Label.vue';

const props = defineProps<{
    model: ResumeInputData
}>();

const componentFile = defineAsyncComponent(
    () => import(
        /* @vite-ignore */
        `./resumeComponentsFormInput/${props.model.component_input.data_type.vue_component_name}`
    )
);

const emit = defineEmits(['data-changed']);
</script>

<template>
    <div class="w-full">
        <Label>{{ props.model.component_input?.label }}</Label>
        <component
            class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
                dark:bg-primary/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-primary px-3 py-1 text-base shadow-xs
                transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-primary file:text-sm
                file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
                focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
                aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
            :name="props.model.component_input?.name"
            :is="componentFile"
            :model="props.model"
            @data-changed="emit('data-changed', $event)"
        />
    </div>
</template>
