"use client";

import { useEffect, useState } from "react";
import { urlWhatsapp } from "@/lib/utils/whatsapp";
import styles from "./FloatingActions.module.css";

export default function FloatingActions({ numeroWhatsapp }: { numeroWhatsapp: string }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className={styles.conteneur}>
      {numeroWhatsapp && (
        <a
          href={urlWhatsapp(numeroWhatsapp)}
          target="_blank"
          rel="noopener noreferrer"
          className={styles.whatsapp}
          aria-label="Nous contacter sur WhatsApp"
        >
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.28-1.39a9.9 9.9 0 0 0 4.76 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.86 9.86 0 0 0 12.04 2Zm0 1.8c2.19 0 4.24.85 5.79 2.4a8.11 8.11 0 0 1 2.39 5.71c0 4.47-3.64 8.11-8.13 8.11h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.17-3.13.82.84-3.05-.19-.31a8.06 8.06 0 0 1-1.24-4.32c0-4.47 3.64-8.06 8.11-8.06Zm-4.47 4.6c-.17 0-.44.06-.67.32-.23.26-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.57.13.17 1.74 2.77 4.29 3.78 2.12.84 2.55.67 3.01.63.46-.04 1.49-.6 1.7-1.19.21-.58.21-1.08.15-1.19-.06-.1-.23-.17-.48-.3-.25-.13-1.49-.74-1.72-.82-.23-.08-.4-.13-.57.13-.17.26-.65.82-.8 1-.15.17-.29.19-.55.06-.25-.13-1.07-.4-2.04-1.27-.75-.67-1.26-1.5-1.41-1.75-.15-.26-.02-.4.11-.53.11-.11.25-.29.38-.44.13-.15.17-.26.25-.43.08-.17.04-.32-.02-.45-.06-.13-.57-1.4-.79-1.91-.2-.5-.41-.43-.57-.44l-.48-.01Z" />
          </svg>
        </a>
      )}

      {visible && (
        <button
          type="button"
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          className={styles.haut}
          aria-label="Retour en haut de la page"
        >
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M12 19V5M12 5l-6 6M12 5l6 6"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </button>
      )}
    </div>
  );
}