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

interface PositionInputProps {
  label?: string; // Optional label for the input
  onChange: (value: string) => void; // Callback for value change
  placeholder?: string; // Optional placeholder
  type?: string; // Input type (e.g., text, number, email)
  value1?: number;
  value2?: number;
  disabled?: boolean; // Optional disabled property
  isEyedrop?: boolean; // Optional eyedrop property
  handleEyeDropClick?: () => void; // Optional function for eye drop click
}

const PositionInput: React.FC<PositionInputProps> = ({
  onChange,
  label = "Position", // Default label
  placeholder = "Enter value", // Default placeholder
  type = "number", // Default type
  value1 = "number",
  value2 = "number",
  disabled = false, // Default disabled value
  isEyedrop = false, // Default isEyedrop value
  handleEyeDropClick = () => { }, // Default function for eye drop click
}) => {
  return (
    <div className="custom-input-container">
      <div className="header">{label}</div>
      <div className="inputs-container">
        <div className="input-container">
          <div className="custom-input-label">X : </div>
          <input
            className="custom-input-field"
            type={type}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            value={value1}
            disabled={disabled} // Apply disabled prop
          />
        </div>
        <div className="input-container">
          <div className="custom-input-label">Y : </div>
          <input
            className="custom-input-field"
            type={type}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            value={value2}
            disabled={disabled} // Apply disabled prop
          />
        </div>
      </div>
      {isEyedrop && (
        <div className="eye-picker-button" onClick={handleEyeDropClick}>
          <EyeDroperIcon isActive={false} />
        </div>
      )}
    </div>
  );
};

export default PositionInput;
