"use client";

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

export function WhatsAppFloat({
  phone = "966544666050",
  message,
}: {
  phone?: string;
  message?: string;
}) {
  const href = `https://wa.me/${phone}${message ? `?text=${encodeURIComponent(message)}` : ""}`;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className={cn(
        "fixed bottom-5 z-50 inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-appBorder bg-white/5 text-appText shadow-[0_18px_40px_rgba(0,0,0,0.55)] backdrop-blur transition hover:bg-white/10",
        "right-5",
      )}
      aria-label="WhatsApp"
    >
      <MessageCircle className="h-5 w-5" />
    </a>
  );
}