<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    modelValue?: string
    size?: 'small' | 'normal' | 'large'
    invalid?: boolean
    type?: string
    placeholder?: string
  }>(),
  {
    modelValue: '',
    size: 'normal',
    invalid: false,
    type: 'text',
  },
)

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

const dataP = computed(() =>
  [props.size === 'small' ? 'small' : props.size === 'large' ? 'large' : null, props.invalid ? 'invalid' : null]
    .filter(Boolean)
    .join(' '),
)
</script>

<template>
  <input
    class="nych-input"
    :data-p="dataP || undefined"
    :type="type"
    :placeholder="placeholder"
    :value="modelValue"
    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>
