import { createPortal } from "react-dom";
import { useFab } from "../../Context/FabContext";

const OffcanvasTrigger = () => {
  const { openOffcanvas, offcanvas, showTrigger } = useFab();

  if (!showTrigger || !offcanvas.content) return null;

  const btn = (
    <i
      className="bx bx-slider-alt position-fixed p-2 bg-primary text-white rounded-start"
      onClick={() => openOffcanvas(offcanvas.title, offcanvas.content)} 
      role="button"
      style={{
        top: "25%",
        right: "0%",
        cursor: "pointer",
        zIndex: 1056,
      }}
    />
  );

  return createPortal(btn, document.body);
};

export default OffcanvasTrigger;