import React, { useEffect } 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();

  useEffect(() => {

  }, [top, left]);

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

export default EditWidgetOption;
