"use client";

import React from "react";
import { MessageSquare } from "lucide-react";
import { useApp } from "@/context/AppContext";

export const FloatingWhatsApp: React.FC = () => {
  const { siteConfig } = useApp();
  const whatsappNumber = siteConfig.whatsappNumber.replace(/\+/g, "").trim(); // Support number from config
  const message = encodeURIComponent(
    "Hi STARBOY PAKISTAN, I'm browsing the site and would like some assistance with sizing, orders, or fabric details."
  );

  return (
    <a
      href={`https://wa.me/${whatsappNumber}?text=${message}`}
      target="_blank"
      rel="noopener noreferrer"
      className="fixed bottom-6 right-6 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-[#0A0A0A] border border-[#D4AF37] shadow-xl text-[#D4AF37] hover:bg-[#D4AF37] hover:text-[#0A0A0A] hover:scale-105 transition-all duration-300 group"
      aria-label="Contact support on WhatsApp"
    >
      <MessageSquare className="h-6 w-6 group-hover:rotate-6 transition-transform" />
      <span className="absolute right-16 scale-0 rounded bg-[#0A0A0A] border border-[#D4AF37]/40 px-3 py-1.5 text-[10px] uppercase font-bold tracking-widest text-[#F8F7F2] opacity-0 shadow-lg group-hover:scale-100 group-hover:opacity-100 transition-all duration-300 origin-right whitespace-nowrap">
        WHATSAPP CHAT
      </span>
    </a>
  );
};