<script setup lang="ts">

type Props = {
    variant?: "solid" | "outlined";
    disabled?: boolean;
    error?: boolean;
    message?: string;
    placeholder?: string;
    modelValue?: string;
};

// props

const props = withDefaults(defineProps<Props>(), {
    variant: "solid"
});
const { variant, message, error, disabled } = toRefs(props);

// emits

const emit = defineEmits(["update:modelValue"]);

// state

const inputRef = ref<HTMLInputElement | null>(null);

// computed

const classes = computed(() => {
    return [
        "flex items-center cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3 rounded-100",
        {
            "input-solid": variant.value === "solid",
            "input-outlined": variant.value === "outlined",
            "input-effects": !error.value,
            [variant.value === "solid"
                ? "input-solid-error"
                : "input-outlined-error"]: error.value
        }
    ];
});

// methods

const onInput = (e: any) => {
    emit("update:modelValue", e.target.value);
};

</script>

<template>
    <div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
        <slot name="startItem" />

        <input
            :value="modelValue"
            @input="onInput"
            ref="inputRef"
            class="outline-none w-max"
            :placeholder="placeholder"
        />

        <slot name="endItem" />
    </div>
    <!-- <Tooltip :title="message" class="w-full">
    </Tooltip> -->
</template>
