import React from "react";
import {
  useLeftData,
  useTopData,
} from "../../../store/visualization/useZone3DWidgetStore";

interface EditWidgetOptionProps {
  options: string[];
  onClick: (option: string) => void;
}

const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
  options,
  onClick,
}) => {
  const { top } = useTopData();
  const { left } = useLeftData();

  return (
    <div
      className="context-menu-options-wrapper"
      style={{
        position: "absolute",
        top: `${top}px`,
        left: `${left}px`,
        zIndex: 100,
      }}
    >
      <div className="context-menu-options">
        {options.map((option, index) => (
          <button
            id="content-menu-option-button"
            className="option"
            key={`${index}-${option}`}
            onClick={() => onClick(option)}
          >
            {option}
          </button>
        ))}
      </div>
    </div>
  );
};

export default EditWidgetOption;
