<template>
  <div class="relative mb-1">
    <input
      :type="showPassword ? 'text' : 'password'"
      :value="modelValue"
      :placeholder="placeholder"
      @input="$emit('update:modelValue', $event.target.value)"
      class="mt-1 block w-full rounded-md shadow-sm sm:text-sm
             bg-A text-D border-B focus:border-C
             focus:ring focus:ring-D focus:ring-opacity-50 p-2 pr-10"
    />

    <!-- Tombol show/hide password -->
    <button
      type="button"
      @click="togglePassword"
      class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700 focus:outline-none"
    >
      <i v-if="showPassword" class="fas fa-eye"></i>
      <i v-else class="fas fa-eye-slash"></i>
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "Password",
  },
});

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

const showPassword = ref(false);

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};
</script>
