"use client";

import { motion } from "framer-motion";
import { MessageCircle } from "lucide-react";
import { useTranslation } from "@/lib/i18n/context";

export function WhatsAppFloat() {
  const { dir } = useTranslation();
  
  // Clean phone number for WhatsApp URL (remove spaces, plus sign is optional but safe to keep numeric)
  const phoneNumber = "905524502179"; 
  const whatsappUrl = `https://wa.me/${phoneNumber}`;

  return (
    <motion.div
      initial={{ scale: 0, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{ delay: 1, type: "spring", stiffness: 200 }}
      className={`fixed bottom-6 z-50 ${dir === "rtl" ? "left-6" : "right-6"}`}
    >
      <a
        href={whatsappUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="relative flex items-center justify-center w-14 h-14 bg-[#25D366] text-white rounded-full shadow-xl hover:bg-[#128C7E] transition-all duration-300 hover:scale-110 group"
        aria-label="Chat with us on WhatsApp"
      >
        {/* Pulse effect */}
        <span className="absolute inset-0 rounded-full bg-[#25D366] animate-ping opacity-75 duration-1000"></span>
        
        <MessageCircle size={28} className="relative z-10" />
        
        {/* Tooltip */}
        <span className={`absolute px-3 py-1.5 bg-white text-dark-text text-sm font-bold rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none ${dir === "rtl" ? "left-full ml-4" : "right-full mr-4"}`}>
          {dir === "rtl" ? "تواصل معنا" : "Chat with us"}
        </span>
      </a>
    </motion.div>
  );
}