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

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

  /** Social icons */
  const socialIcons = [
    {
      href: "https://www.facebook.com/ELRaphaRehabCenter/",
      iconClass: "icon-4", // Facebook
      label: "Facebook",
      offset: -40,
    },
    {
      href: "https://www.instagram.com/elrapharehab/",
      iconClass: "icon-7", // Instagram
      label: "Instagram",
      offset: 40, 
    },
  ];

  return (
    <div>
      {/* Extra social icons */}
      {open && (
        <div
          style={{
            position: "fixed",
            top: "50%",
            right: "70px",
            transform: "translateY(-50%)",
            display: "flex",
            flexDirection: "column",
            gap: "15px",
            zIndex: 9999,
          }}
        >
          {socialIcons.map((icon, i) => (
            <a
              key={i}
              href={icon.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={icon.label}
              style={{
                background: "#102548",
                borderRadius: "50%",
                width: "45px",
                height: "45px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#fff", // White icon color
                fontSize: "22px",
                textDecoration: "none",
              }}
            >
              <i className={icon.iconClass}></i>
            </a>
          ))}
        </div>
      )}

      {/* Main floating button */}
      <button
        type="button"
        aria-label={open ? "Close Socials" : "Open Socials"}
        onClick={() => setOpen((prev) => !prev)}
        style={{
          position: "fixed",
          top: "50%",
          right: "20px",
          transform: "translateY(-50%)",
          background: "#102548",
          borderRadius: "50%",
          padding: "15px",
          border: "none",
          zIndex: 9999,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          cursor: "pointer",
          color: "#fff", // Main button icon color white
        }}
      >
         <img
          src={
            open
              ? "/assets/images/logo-2.png"
              : "/assets/images/logo-2.png"
          }
          alt="Social"
          style={{ width: "28px", height: "28px" }}
        />
      </button>
    </div>
  );
}