import Link from "next/link";
import { MessageCircle } from "lucide-react";

export function WhatsAppFloat({
  phoneRaw,
  message,
}: {
  phoneRaw: string;
  message?: string | null;
}) {
  const cleaned = phoneRaw.replace(/[^\d]/g, "");
  const href = `https://wa.me/${cleaned}${
    message ? `?text=${encodeURIComponent(message)}` : ""
  }`;

  return (
    <Link
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="WhatsApp ile yazın"
      className="fixed bottom-20 right-5 z-40 flex size-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-lg shadow-[#25D366]/30 transition hover:scale-105 hover:shadow-xl sm:bottom-6"
    >
      <MessageCircle className="size-7" />
      <span className="absolute inset-0 -z-10 animate-ping rounded-full bg-[#25D366]/40" />
    </Link>
  );
}
