import React from "react";

interface PositionInputProps {
  onChange: (value: string) => void; // Callback for value change
  placeholder?: string; // Optional placeholder
  type?: string; // Input type (e.g., text, number, email)
}

const PositionInput: React.FC<PositionInputProps> = ({
  onChange,
  placeholder = "Enter value", // Default placeholder
  type = "number", // Default type
}) => {
  return (
    <div className="custom-input-container">
      <div className="header">Position</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}
          />
        </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}
          />
        </div>
      </div>
    </div>
  );
};

export default PositionInput;