<script setup>
import { ref } from "vue";

/** Eventos */
const emit = defineEmits(['address-created']);

/** Refs */
const addressName = ref("");

/** Métodos */
const handleSubmit = () => {
  if (!addressName.value.trim()) {
    window.Notify.warning(window.Lang('address.validation.required'));
    return;
  }

  // Emitir evento al padre con la nueva dirección
  emit('address-created', {
    name: addressName.value
  });

  // Limpiar el formulario
  addressName.value = "";
};
</script>

<template>
  <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-10">
    <h3 class="text-xl font-semibold mb-4 text-gray-800">
      {{ $t('address.create.title') }}
    </h3>

    <form @submit.prevent="handleSubmit">
      <div class="mb-5">
        <label
          for="addressName"
          class="block text-sm text-gray-600 font-medium mb-2"
        >
          {{ $t('address.name') }}:
        </label>
        <input
          type="text"
          id="addressName"
          v-model="addressName"
          :placeholder="$t('address.placeholder')"
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
      </div>
      <div class="mb-3 flex justify-center">
        <button
          type="submit"
          class="w-1/4 bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
        >
          {{ $t('save') }}
        </button>
      </div>
    </form>
  </div>
</template>
