<template>
  <div class="tw-grid tw-grid-cols-[190px_200px] md:tw-grid-cols-[190px_344px] xl:tw-grid-cols-[190px_344px] xl:tw-gap-[52px] md:tw-gap-[52px]">
    <label class="tw-leading-[40px] tw-font-normal" :for="input.id"><span>{{ $t(input.label)
    }}<span v-if="input.required" class="required">*</span></span></label>
    <input :id="input.id" :class="['tw-w-[200px] xl:tw-w-[344px] md:tw-w-[344px]',validation ? '' : 'tw-border-error-default']" :type="input.type" :value="value"
      v-model="inputVal" :placeholder="input.placeholder" />
    <div v-show="errorText" class="tw-text-error-default tw-text-[14px] tw-font-medium tw-leading-[18px] tw-mt-[4px]">
      {{ errorText }}
    </div>
  </div>
</template>
<script>
export default {
  name: "ElementInputNew",
  props: {
    input: {
      type: Object,
    },
    default: {
      type: String,
    },
    validation: {
      type: Boolean,
    },
    errorText: {
      type: String,
    },
  },
  data() {
    return {
      value: this.default ? this.default : "",
    };
  },
  mounted() { },
  watch: {
    default: {
      handler: function () {
        this.value = this.default;
      },
    },
  },

  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.value = val;
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>

</style>
