import { MessageCircle, ChevronUp } from "lucide-react";
import { useState } from "react";

const branches = [
  { label: "🇨🇩 DRC Office", href: "https://wa.me/243XXXXXXXXX" },
  { label: "🇰🇪 Kenya Office", href: "https://wa.me/254XXXXXXXXX" },
];

const WhatsAppButton = () => {
  const [open, setOpen] = useState(false);

  return (
    <div className="fixed bottom-20 md:bottom-6 right-4 z-50 flex flex-col items-end gap-2">
      {open && (
        <div className="bg-secondary border border-primary/20 rounded-xl shadow-xl overflow-hidden mb-1 animate-in fade-in slide-in-from-bottom-2">
          {branches.map((b) => (
            <a
              key={b.label}
              href={b.href}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-white/90 hover:bg-primary/10 hover:text-primary transition-colors whitespace-nowrap"
            >
              <MessageCircle size={18} className="text-green-400" />
              {b.label}
            </a>
          ))}
        </div>
      )}
      <button
        onClick={() => setOpen(!open)}
        className="w-14 h-14 rounded-full bg-green-500 hover:bg-green-600 text-white flex items-center justify-center shadow-lg hover:shadow-xl transition-all hover:scale-110"
        aria-label="Chat on WhatsApp"
      >
        {open ? <ChevronUp size={28} /> : <MessageCircle size={28} />}
      </button>
    </div>
  );
};

export default WhatsAppButton;
