import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons';

export default function FloatingWhatsApp() {
    // State untuk mengontrol apakah teks tooltip terlihat
    const [isTextVisible, setIsTextVisible] = useState(true);

    // useEffect untuk menyembunyikan teks setelah beberapa detik
    useEffect(() => {
        const timer = setTimeout(() => {
            setIsTextVisible(false);
        }, 6000); // Teks akan hilang setelah 6 detik

        // Cleanup function untuk membersihkan timer jika komponen di-unmount
        return () => clearTimeout(timer);
    }, []); // Array dependensi kosong agar useEffect hanya berjalan sekali

    // Varian animasi untuk teks
    const textVariants = {
        initial: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: 20, transition: { duration: 0.5, ease: 'easeInOut' } },
    };

    return (
        <a
            href="https://wa.me/6281234567890" // <-- GANTI DENGAN NOMOR WA ASLI
            target="_blank"
            rel="noopener noreferrer"
            className="fixed bottom-8 right-8 z-40 flex items-center gap-3 cursor-pointer group"
        >
            {/* Tooltip Teks yang Bisa Menghilang */}
            <AnimatePresence>
                {isTextVisible && (
                    <motion.span
                        variants={textVariants}
                        initial="initial"
                        exit="exit"
                        className="bg-white text-gray-700 px-4 py-2 rounded-lg shadow-lg font-semibold text-sm whitespace-nowrap"
                    >
                        Ingin bertanya? Yuk klik di sini!
                    </motion.span>
                )}
            </AnimatePresence>

            {/* Tombol Ikon WhatsApp dengan Animasi */}
            <motion.div
                className="bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl"
                animate={{
                    scale: [1, 1.1, 1, 1.1, 1], // Animasi "berdenyut"
                }}
                transition={{
                    duration: 2.5,
                    ease: "easeInOut",
                    repeat: Infinity,
                    repeatDelay: 2,
                }}
                whileHover={{ scale: 1.15 }} // Sedikit membesar saat di-hover
            >
                <FontAwesomeIcon icon={faWhatsapp} className="text-4xl" />
            </motion.div>
        </a>
    );
}