<!-- Form text input -->
<script setup lang="ts">
import IconSearch from '../icons/IconSearch.vue';

// Props with default values
const {
    placeholder = '',
    errorMsg = '',
    type = 'text',
    name = '',
    isSearch = false,
    disabled = false,
} = defineProps<{
    placeholder?: string;
    type?: 'text' | 'password' | 'url' | 'number';
    name?: string;
    errorMsg?: string;
    isSearch?: boolean;
    disabled?: boolean;
}>();

// Define returned value
const value = defineModel<string | number>();
</script>

<template>
    <div class="w-full">
        <!-- Input -->
        <div class="relative">
            <input
                :class="[
                    'w-full rounded-lg text-base leading-base px-3.5 md:px-4 py-1.5 md:py-2 transition-colors border-neutral-500 hover:border-primary-500  focus:border-primary-500 placeholder:text-base-200 focus:shadow-none',
                    errorMsg && '!border-danger-500',
                    isSearch && 'pl-9 md:pl-9',
                    disabled && 'bg-neutral-50 text-base-100 hover:border-neutral-500',
                ]"
                :id="name"
                :name
                :type
                :placeholder
                :disabled
                v-model.lazy="value"
            />
            <IconSearch class="absolute top-3 left-3 text-base-200" v-if="isSearch" />
        </div>
        <!-- Input -->

        <!-- Error message -->
        <p class="text-xs leading-loose text-danger-500 mt-0.5" v-if="errorMsg">{{ errorMsg }}</p>
    </div>
</template>

<style scoped></style>
