<script lang="ts" setup>
import AInputStandard from "#adata-ui/components/forms/input/standard/AInputStandard.vue";


interface Props {
  disabled?: boolean
  label?: string
  size?: 'sm' | 'md'
  error?: string
  required?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  label: '',
  size: 'md',
  error: '',
  required: false
})

const isOpened = ref<boolean>(false)
</script>

<template>
  <a-input-standard
    v-bind="$attrs"
    :type="isOpened ? 'text' : 'password'"
    v-bind.prop="props"
  >
    <template #endButton>
      <button
        class="absolute top-1/2 right-4 text-gray-500 fill-gray-500 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
        :disabled="disabled"
        type="button"
        @click="isOpened = !isOpened"
      >
        <a-icon-eye-closed
          v-if="!isOpened"
          filled
          class="!mb-0"
        />
        <a-icon-eye-opened
          v-else
          filled
          class="!mb-0"
        />
      </button>
    </template>
  </a-input-standard>
</template>

<style scoped>
</style>
