import React from "react";
import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
import RegularDropDown from "./RegularDropDown";

interface EyeDropInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  options?: string[];
}

const EyeDropInput: React.FC<EyeDropInputProps> = ({
  label = "Object",
  onChange,
}) => {
  const handleEyeDropClick = () => {
    // Here you would typically implement the eye dropper functionality
    // For now, we'll just simulate selecting a value
    const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
    onChange(simulatedValue);
  };

  return (
    <div className="eye-dropper-input-container">
      <div className="label">{label}</div>
      <div className="input-container">
        {/* <input disabled type="text" /> */}
        <RegularDropDown
          header="select object"
          options={[]}
          onSelect={() => { }}
        />
        <div className="eye-picker-button" onClick={handleEyeDropClick}>
          <EyeDroperIcon isActive={false} />
        </div>
      </div>
    </div>
  );
};

export default EyeDropInput;