<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-lg p-8 mx-4 mt-4 mb-6 shadow-md">
    <h2 class="text-2xl font-bold mb-6 text-gray-900">
      Crear nueva dirección
    </h2>

    <form @submit.prevent="handleSubmit">
      <div class="mb-6">
        <label
          for="addressName"
          class="block text-sm text-gray-700 font-medium mb-2"
        >
          Nombre de la Dirección:
        </label>
        <input
          type="text"
          id="addressName"
          v-model="addressName"
          placeholder="Ingrese el nombre de la dirección"
          class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
        />
      </div>
      <div class="flex justify-center">
        <button
          type="submit"
          class="px-16 bg-primary hover:bg-primary/90 text-white font-semibold py-3 rounded-md transition-all duration-200 shadow-sm hover:shadow-md"
        >
          Guardar
        </button>
      </div>
    </form>
  </div>
</template>
