<template>
  <fieldset class="fieldset">
    <label v-if="label" class="label" :for="inputId">
      <span>{{ label }}</span>
    </label>
    <div class="relative flex">
      <input
        :id="inputId"
        :value="modelValue"
        :type="showPass ? 'text' : 'password'"
        class="input flex-1 pr-10"
        :placeholder="placeholder"
        :required="required"
        :autocomplete="autocomplete"
        :readonly="readonly"
        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
      />
      <button
        type="button"
        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-square min-h-0 h-8 w-8"
        :aria-label="showPass ? 'Hide password' : 'Show password'"
        @click="showPass = !showPass"
      >
        <icons-icon-eye-off v-if="showPass" />
        <icons-icon-eye v-else />
      </button>
    </div>
  </fieldset>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: string
    label?: string
    placeholder?: string
    required?: boolean
    autocomplete?: string
    readonly?: boolean
    inputId?: string
  }>(),
  { required: false, autocomplete: 'off', inputId: undefined }
)

const emit = defineEmits<{ 'update:modelValue': [value: string] }>()

const showPass = ref(false)
const inputId = computed(() => props.inputId ?? `password-${Math.random().toString(36).slice(2, 9)}`)
</script>
