<script lang="ts" setup>
import { ref } from 'vue'
import { cn } from '@mykopkb/core/utils/cn'
import { Input } from '@/components/ui/input'
import { Lucide } from '@/components/ui/lucide'

const modelValue = defineModel<string>({ required: true })

const {
  id,
  placeholder,
  autocomplete,
  disabled = false,
  required = false,
  minlength,
  class: className,
} = defineProps<{
  id?: string
  placeholder?: string
  autocomplete?: string
  disabled?: boolean
  required?: boolean
  minlength?: number | string
  class?: string
}>()

const visible = ref(false)

function toggleVisibility() {
  visible.value = !visible.value
}
</script>

<template>
  <div class="relative">
    <Input
      :id="id"
      v-model="modelValue"
      :type="visible ? 'text' : 'password'"
      :placeholder="placeholder"
      :autocomplete="autocomplete"
      :disabled="disabled"
      :required="required"
      :minlength="minlength"
      :class="cn('pr-10', className)"
    />
    <button
      type="button"
      class="absolute inset-y-0 right-0 flex items-center px-3 text-foreground/70 transition hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
      :disabled="disabled"
      :aria-label="visible ? 'Sembunyikan kata laluan' : 'Tunjuk kata laluan'"
      @click="toggleVisibility"
    >
      <Lucide :icon="visible ? 'EyeOff' : 'Eye'" class="size-4" />
    </button>
  </div>
</template>
