<script>
export default {
  name: 'Input',
  props: {
    id: {
      default: 'input',
      type: String
    },
    type: {
      default: 'text',
      type: String
    },
    name: {
      default: '',
      type: String
    },
    inputClass: {
      default: '',
      type: String
    },
    placeholder: {
      default: '',
      type: String
    },
    required: {
      default: false,
      type: Boolean
    },
    value: {
      default: '',
      type: String
    },
    onChange: {
      default: () => {},
      type: Function
    }
  },
  computed: {
  },
  methods: {
    setValue: function (e) {
      this.onChange({key: this.name, value: e.target.value})
    }
  }
}
</script>

<template>
  <input
    :id="id"
    :type="type"
    :name="name"
    :class="`flex w-full rounded-lg border-zinc-300 py-1 px-2 text-zinc-900 focus:outline-none focus:ring-4 text-sm sm:leading-6 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ${inputClass}`"
    :placeholder="placeholder"
    :required="required"
    :value="value"
    :on:change="setValue"
  >
</template>
