<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'md'
  }
});

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

const updateValue = (event) => {
  emit('update:modelValue', event.target.value);
};
</script>

<template>
  <div class="rs-input-wrapper">
    <label v-if="label" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
      {{ label }}
      <span v-if="required" class="text-red-500">*</span>
    </label>
    
    <input
      :value="modelValue"
      @input="updateValue"
      :type="type"
      :placeholder="placeholder"
      :disabled="disabled"
      :required="required"
      class="rs-input"
      :class="{
        'rs-input-sm': size === 'sm',
        'rs-input-md': size === 'md',
        'rs-input-lg': size === 'lg',
        'rs-input-error': error,
        'rs-input-disabled': disabled
      }"
    />
    
    <div v-if="error" class="rs-input-error-message">
      {{ error }}
    </div>
  </div>
</template>

<style scoped>
.rs-input-wrapper {
  @apply w-full;
}

.rs-input {
  @apply w-full px-3 py-2 border rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
  border-color: rgb(var(--fk-border-color));
}

.rs-input:hover {
  @apply border-gray-400 dark:border-gray-500;
}

.rs-input:focus {
  @apply outline-none ring-2 ring-blue-500 border-blue-500;
}

.rs-input-sm {
  @apply px-2 py-1 text-sm;
}

.rs-input-md {
  @apply px-3 py-2 text-sm;
}

.rs-input-lg {
  @apply px-4 py-3 text-base;
}

.rs-input-error {
  @apply border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500;
}

.rs-input-disabled {
  @apply bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed;
}

.rs-input-error-message {
  @apply text-sm text-red-500 mt-1;
}
</style> 