<script setup>
import { ref } from 'vue';
import { FloatingLabelInput } from '@/components';

defineProps({
    modelValue: {
        type: String,
        default: ""
    },
    label: {
        type: String,
        default: "Password"
    }
});

defineEmits(['update:modelValue'])
const isPasswordVisible = ref(false);
</script>
<template>
    <div class="input-group form-input">
        <FloatingLabelInput
            :type="isPasswordVisible ? 'text' : 'password'"
            :label="label"
            :model-value="modelValue"
            @update:model-value="newValue =>
                $emit('update:modelValue', newValue)"
        />

        <label class="btn btn-outline-secondary d-flex align-items-center password-visible">
            <input
                v-model="isPasswordVisible"
                type="checkbox"
                class="btn-check"
                autocomplete="off"
            >
            <i
                class="fa"
                :class="isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'"
            />
        </label>
    </div>
</template>
<style scoped>
</style>

