"use client";

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

export function FloatingWhatsApp({
  phone = "6281234567890",
  message = "Halo 305 Gaming, saya ingin order produk digital.",
}: {
  phone?: string;
  message?: string;
}) {
  const href = `https://wa.me/${phone.replace(/\D/g, "")}?text=${encodeURIComponent(message)}`;

  return (
    <motion.a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat WhatsApp 305 Gaming"
      initial={{ opacity: 0, scale: 0.85, y: 12 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      transition={{ delay: 0.6, duration: 0.35 }}
      whileHover={{ scale: 1.06 }}
      whileTap={{ scale: 0.96 }}
      className="fixed bottom-20 right-4 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[0_12px_30px_rgba(37,211,102,0.45)] lg:bottom-8 lg:right-8"
    >
      <span className="absolute inset-0 animate-ping rounded-full bg-[#25D366]/30" />
      <MessageCircle className="relative h-6 w-6 fill-current" />
    </motion.a>
  );
}