<template lang="pug">
  .flex.flex-col.gap-y-2
    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
    .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
      :class="{'border-none': borderNone, 'border-error': borderError }"
      :style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
    )
      input.input.w-full.outline-0.not-italic(
        v-model="value",
        :placeholder="placeholder",
        :disabled="disabled",
        :type="type"
      )
      .slot(v-if="withIcon", :class="iconPosition")
        slot.cursor-pointer
</template>

<script>
export default {
  name: "BaseInput",
  props: {
    type: {
      default: "text",
    },
    modelValue: String,
    withIcon: {
      default: false,
    },
    iconPosition: {
      default: "right",
    },
    placeholder: String,
    borderNone: Boolean,
    borderError: Boolean,
    disabled: Boolean,
    label: String,
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.left
  order: -1
.right
  order: 1
//TODO: Вынести grey borders в taiwindConfig
.input-wrapper
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 4px
  background-color: var(--default-white)
  color: var(--font-black-color)
  height: 40px
.border-none
  border: none
.border-error
  border-color: var(--border-red-color)
.input
  background-color: inherit
  &:disabled, &[disabled]
    background-color: var(--bg-disable-grey-color)
.label
  color: var(--font-black-color)
</style>
