"use client";

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

export function FloatingWhatsApp() {
  return (
    <div className="fixed bottom-6 right-6 md:bottom-10 md:right-10 z-[110]">
      <motion.a
        href="https://wa.me/905XXXXXXXXX"
        target="_blank"
        rel="noopener noreferrer"
        whileHover={{ x: -4, y: -4 }}
        whileTap={{ scale: 0.95 }}
        className="bg-[#25D366] text-white w-14 h-14 md:w-20 md:h-20 flex items-center justify-center shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] transition-all rounded-none relative group"
      >
        <MessageCircle size={32} fill="currentColor" className="text-white md:scale-125" />
        <span className="absolute right-full mr-4 bg-surface-container-highest text-white px-4 py-2 text-[10px] uppercase tracking-widest font-black opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
            Hemen Whatsapp'tan Yazın
        </span>
      </motion.a>
    </div>
  );
}