"use client";
import React, { useState } from "react";

export default function ContactFloat() {
  const [open, setOpen] = useState(false);

  /** 3 extra contact icons */
  const extraIcons = [
    {
      href: "mailto:info@example.com",
      src: "/assets/images/icons/mail.png",
      label: "Mail",
      offset: 30,   // main button bottom(60) + 20 = 80
    },
    {
      href: "https://wa.me/1234567890",
      src: "/assets/images/icons/whatsapp.png",
      label: "WhatsApp",
      offset: 90,  // 60 + 90
    },
    {
      href: "sms:1234567890",
      src: "/assets/images/icons/sms.png",
      label: "SMS",
      offset: 150,  // 60 + 160
    },
  ];

  return (
    <div className="contact-icon-container">
      {/* Extra icons */}
      {extraIcons.map((icon, i) => (
        <a
          key={i}
          href={icon.href}
          aria-label={icon.label}
          className={`contact-icon-outer extra-icon ${open ? "show" : ""}`}
          style={{ bottom: `${icon.offset}px` }}
        >
          <img src={icon.src} alt={icon.label} className="contact-icon" />
        </a>
      ))}

      {/* Main floating button */}
      <button
        type="button"
        aria-label={open ? "Close" : "Call Us"}
        className="contact-icon-outer toggle-btn"
        onClick={() => setOpen((prev) => !prev)}
      >
        <img
          src={
            open
              ? "/assets/images/icons/close.png" // show close icon when menu is open
              : "/assets/images/icons/call.png"  // default call icon
          }
          alt="Contact"
          className="contact-icon"
        />
      </button>
    </div>
  );
}