"use client";

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

export function WhatsAppTestButton({ inputId }: { inputId: string }) {
  const handleTest = () => {
    const input = document.getElementById(inputId) as HTMLInputElement | null;
    const value = input?.value?.trim();

    if (!value) {
      alert("Isi nomor WhatsApp dulu sebelum tes.");
      return;
    }

    const url = buildWhatsAppUrl(
      value,
      "Ini pesan tes dari halaman Pengaturan Ranata Tour."
    );
    window.open(url, "_blank", "noopener,noreferrer");
  };

  return (
    <button
      type="button"
      onClick={handleTest}
      className="flex shrink-0 items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-heading transition hover:border-merah-ranata hover:text-merah-ranata"
    >
      <MessageCircle className="h-4 w-4" />
      Tes Nomor
    </button>
  );
}