<script setup lang="ts">
// types

type Props = {
    id?: string;
    label: string;
    required?: boolean;
    error?: any;
};

// props

withDefaults(defineProps<Props>(), {
    required: false,
});
</script>

<template>
    <div class="w-full flex flex-col gap-2">
        <div class="flex items-center gap-1 ps-2">
            <label
                :for="id"
                class="typo-label-xs lg:typo-label-sm"
                >{{ label }}</label
            >
            <span
                v-if="!!required && required"
                class="text-danger-600"
                >*</span
            >
        </div>
        <slot />
        <div
            v-if="!!error && error.$error"
            class="w-full typo-label-xs flex items-center py-1 px-3 rounded-md text-danger-600"
        >
            {{ error.$errors[0].$message }}
        </div>
    </div>
</template>

<style scoped></style>
