'use client'

import Image from "next/image";
import emailDog from '../../../public/assets/Images/ImageHome/emailDogSvg.svg'
import EmailVectorIcon from '../../../public/assets/Images/Icons/EmailVectorIcon.svg'
import api from "@/services/api";
import {useState} from "react";
import {toast} from "react-toastify";
import sanitizeHtml from 'sanitize-html';


export default function ReceiveTips() {
    const [emailDicas, setEmailDicas] = useState<string>('')

    const handlerNewsletter = () => {

        if (emailDicas) {
            api.post('SiteNewsletterInscritos/inserir', {email: sanitizeHtml(emailDicas)})
                .then(response => {
                    if (response.status == 201 || response.status == 200) {
                        toast.success('E-mail cadastrato com sucesso.', {
                            theme: "colored"
                        })
                        setEmailDicas('')
                    }
                })
                .catch(() => {
                    toast.error('E-mail Invalido.', {
                        theme: "colored"
                    })
                });
        }
    };

    return (
        <section className="container mx-auto p-4 md:p-8 mb-28 md:mb-10 md:mt-20">
            <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center lg:justify-between">

                <div className="lg:w-1/2 mt-8 mb-4 lg:mt-0 flex justify-center lg:justify-end order-1 lg:order-2">
                    <Image
                        src={emailDog}
                        alt="Newsletter"
                        width={600}
                        height={300}
                        className="w-full h-auto"
                    />
                </div>

                <div className="lg:w-1/2 w-full text-center lg:text-left  order-2 lg:order-1">
                    <h1 className="lg:text-5xl md:text-5xl text-[40px] font-black text-plamev-blue-500 leading-[44px]">
                        <span className="block">RECEBA DICAS E </span> <span
                        className="md:block">NOVIDADES SOBRE O </span>
                        <span className="text-plamev-yellow-500">UNIVERSO PET!</span>
                    </h1>

                    <p className="mb-6 mt-10 w-full mx-auto lg:mx-0 text-plamev-dark-400">
                        Toda quinta, às 10h, você recebe um e-mail fresquinho para te ajudar a cuidar mais e melhor do
                        seu melhor amigo.
                    </p>

                    <div className="flex flex-row gap-2 items-center">
                        <div className="relative w-full flex-grow">
                            <span className="absolute left-3 top-1/2 transform -translate-y-1/2">
                                <Image src={EmailVectorIcon} alt="img" className="w-5 h-5"/>
                            </span>
                            <input
                                type="email"
                                placeholder="Seu e-mail"
                                value={emailDicas}
                                onChange={(e) => setEmailDicas(e.target.value)}
                                className="border border-gray-300 rounded-md pl-10 pr-4 py-2 focus:outline-none w-full h-[54px]"
                            />
                        </div>
                        <button
                            type="button"
                            onClick={handlerNewsletter}
                            className="bg-yellow-500 text-white rounded-md px-4 py-2 font-bold h-[54px]"
                        >
                            Enviar
                        </button>
                    </div>
                </div>
            </div>
        </section>

    )
}