"use client";

import { motion } from "framer-motion";
import { MessageCircle } from "lucide-react";

export function WhatsAppButton({ phone }: { phone: string }) {
  const number = (phone || "").replace(/\D/g, "");
  return (
    <motion.a
      href={`https://wa.me/${number}?text=${encodeURIComponent("Hello AHE Services, I would like to inquire about your HVAC services.")}`}
      target="_blank"
      rel="noopener noreferrer"
      initial={{ scale: 0, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{ delay: 1, type: "spring", stiffness: 200, damping: 15 }}
      className="fixed bottom-6 right-6 z-40 grid place-items-center size-14 rounded-full bg-[#25D366] text-white shadow-lg shadow-green-600/30 hover:scale-110 transition-transform"
      aria-label="Chat on WhatsApp"
    >
      <MessageCircle className="size-7 fill-white" />
      <span className="absolute inset-0 rounded-full bg-[#25D366] animate-ping opacity-20" />
    </motion.a>
  );
}