<template>
  <soft-input
    :id="id"
    v-model="localValue"
    type="text"
    placeholder="Sujet du message"
    :error="error"
    :success="success"
    @blur="handleBlur"
  />
</template>

<script setup>
import { defineEmits, defineProps } from "vue";
import { ref, watch } from "vue";
import SoftInput from "@/components/SoftInput.vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "webmailing-subject",
  },
  error: {
    type: Boolean,
    default: false,
  },
  success: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "blur"]);

const localValue = ref(props.modelValue);

watch(
  () => props.modelValue,
  (newValue) => {
    localValue.value = newValue;
  }
);

watch(localValue, (newValue) => {
  emit("update:modelValue", newValue);
});

const handleBlur = () => {
  emit("blur");
};
</script>
