import Image from "next/image";

interface MobileWhatsAppButtonProps {
  whatsappUrl: string;
}

/**
 * The live site's `.whatsfix` — a round WhatsApp button fixed to the
 * bottom-left of the viewport, mobile only (`display:none` above the same
 * breakpoint the desktop nav takes over at; confirmed in
 * `templates/GAH/scss/footer/_footer.scss` and the real markup in
 * `templates/GAH/index.php`, `bottom:65px; left:15px; width:45px;
 * height:45px`). Positioned above `<MobileBottomBar>` (which reserves 56px
 * at the very bottom) rather than at the real site's fixed 65px, since this
 * app's bottom bar isn't exactly the same height as the live site's.
 *
 * Reuses the same real WhatsApp deep link (`topBarData.whatsappUrl`, already
 * the exact `.../send?phone=...&text=I need help in assignment! Can you
 * help me?` URL from `getWhatsappUrl`) this app already uses for
 * `TopBar`/`MobileBottomBar`'s WhatsApp links, and the same real icon
 * (`/icons/whatsapp.svg`) already used there — not a second copy of either.
 */
export function MobileWhatsAppButton({ whatsappUrl }: MobileWhatsAppButtonProps) {
  return (
    <a
      href={whatsappUrl}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat on WhatsApp"
      className="lg:hidden fixed bottom-16 left-[15px] z-40 w-[45px] h-[45px] rounded-full shadow-[0_2px_10px_rgba(0,0,0,0.3)]"
    >
      <Image src="/icons/whatsapp.svg" alt="" width={45} height={45} className="w-full h-full" />
    </a>
  );
}