<script setup>
import { Icon } from "@iconify/vue";
import { createTranslator } from "../../i18n";

const props = defineProps({
  locale: String
});

const tl = createTranslator(props.locale);

const handleSubmit = async (e) => {
  const formData = new FormData(e.target);

  try {
    const response = await fetch("/api/emailInfo/send", {
      method: "POST",
      body: formData,
    });

    e.target.reset();
    
    if (!response.ok)
        throw new Error();
  } catch (error) {
    console.error(error);
  }
};
</script>

<template>
  <form
    @submit.prevent="handleSubmit"
    class="flex flex-col gap-4"
  >
    <fieldset>

      <input
        name="nombre"
        type="text"
        :placeholder="tl('footer.form.name')"
        required
        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
      />

      <input
        name="email"
        type="email"
        placeholder="E-Mail"
        required
        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
      />

      <textarea
        name="mensaje"
        :placeholder="tl('footer.form.mesagge')"
        rows="5"
        required
        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
      ></textarea>

    </fieldset>

    <div class="flex flex-row justify-between items-center mt-4">

      <!-- Social Icons -->
      <ul class="flex flex-row gap-2">
        <li class="border-r pr-2">
          <a href="https://x.com/CRPazYJusticia" target="_blank">
            <Icon icon="ph:x-logo-thin" class="text-3xl" />
          </a>
        </li>

        <li class="border-r pr-2">
          <a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
            <Icon icon="ph:instagram-logo-thin" class="text-3xl" />
          </a>
        </li>

        <li class="border-r pr-2">
          <a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
            <Icon icon="ph:facebook-logo-thin" class="text-3xl" />
          </a>
        </li>

        <li>
          <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
            <Icon icon="ph:youtube-logo-thin" class="text-3xl" />
          </a>
        </li>
      </ul>

      <!-- Submit -->
      <button
        type="submit"
        class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
      >
        {{ tl("footer.form.button") }}
      </button>

    </div>
  </form>
</template>
