"use client";

import { MessageCircle } from "lucide-react";
import { buildWhatsAppUrl } from "@/lib/whatsapp";

interface WhatsAppBubbleProps {
  phoneNumber?: string | null;
}

export default function WhatsAppBubble({ phoneNumber }: WhatsAppBubbleProps) {
  if (!phoneNumber) return null;

  const href = buildWhatsAppUrl(
    phoneNumber,
    "Halo Ranata Tour, saya ingin bertanya lebih lanjut."
  );

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="fixed bottom-6 right-6 z-[55] flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 hover:scale-110 hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-green-300"
      aria-label="Chat WhatsApp"
    >
      <MessageCircle className="w-7 h-7" />
    </a>
  );
}