<template>
    <div class="newsletters">
        <h2>{{ $t("newslettersDesc") }}</h2>
        <form>
            <div>
                <i class="isax isax-sms" />
                <span>|</span>
                <input v-model="email" :class="{ '!ltr': email }" :placeholder="$t('emailAddress')" />
            </div>
            <Button :label="$t('submit')" :loading="loading" @click="submit()" />
        </form>
    </div>
</template>

<script setup>
const { toast, t } = inject('service')
const loading = ref(false)
const email = ref()

const submit = async () => {
    if (email.value.includes('@')) {
        loading.value = true;
        const { status, error } = await useFetch('/api/news', { method: 'post', body: { email: email.value } })
        loading.value = false;
        email.value = '';

        if (status.value == 'success')
            toast.add({
                life: 3000,
                severity: 'success',
                summary: t('success'),
                detail: t('submitedSuccessfully')
            })
        else
            toast.add({
                life: 3000,
                severity: 'error',
                summary: t('error'),
                detail: error.value
            })
    }

}
</script>

<style lang="scss">
footer .newsletters {
    @apply bg-zinc-100 rounded-xl border-2 border-neutral-200;
    @apply flex flex-col items-center justify-between p-3 font-vazir;
    @apply w-full h-auto gap-4 py-4;
    @apply lg:w-[57.7rem] lg:h-[4.5rem] lg:flex-row;

    h2 {
        @apply text-zinc-800 text-lg font-medium leading-[1.9rem] mr-3;
    }

    form {
        @apply flex gap-2;

        div {
            @apply w-[16.9rem] md:w-[21.5rem] h-12 bg-neutral-200 rounded-lg flex gap-3 items-center p-3;

            i {
                @apply text-2xl;
            }

            input {
                @apply h-12 bg-transparent w-full rtl text-neutral-600 font-medium outline-none;

                &:placeholder {
                    @apply text-neutral-600;
                }
            }
        }

        button {
            @apply w-[4.5rem] h-12 bg-[#47B556] rounded-md text-white text-base font-medium #{!important};
        }
    }
}
</style>
