import React, { useState } from "react";
import {useFab} from "../../Context/FabContext";
import './FloatingMenu.css'

const FloatingMenu = () => {
  const { actions } = useFab(); 
  const [open, setOpen] = useState(false);
  if (actions.length === 0) return null; 

  return (
    <div className="fab-container">
     {open &&
  actions.map((action, index) => (
    <button
      key={index}
      className={`badge bg-${action.color} rounded-pill mb-2 d-inline-flex align-items-center gap-2 px-3 py-1 cursor-pointer fab-option`}
      onClick={action.onClick}
      title={action.label}
    >
      <i className={action.icon}></i>
      <span>{action.label}</span> 
    </button>
))}

          <button type="button" className="btn btn-lg btn-icon rounded-pill me-2 btn-primary fab-main " onClick={() => setOpen(!open)}>
        <span className={`bx ${open ? "bx-x" : "bx-plus"}`}></span>
      </button>
    </div>
  );
};

export default FloatingMenu;