import React from "react";

interface RotationInputProps {
  heading?: string;
  label?: string;
  onChange: (value: string) => void;
  placeholder?: string;
  type?: string;
  value?: number;
  disabled?: boolean;
  min?: number;
  max?: number;
  step?: number;
}

const RotationInput: React.FC<RotationInputProps> = ({
  label = "Rotate :",
  heading = "Rotation",
  onChange,
  placeholder = "Enter value",
  type = "number",
  value,
  disabled = false,
  min,
  max,
  step,
}) => {
  return (
    <div className="custom-input-container">
      <div className="header">{heading}</div>
      <div className="inputs-container" style={{ display: "block" }}>
        <div className="input-container">
          <div className="custom-input-label">{label}</div>
          <input
            className="custom-input-field"
            type={type}
            onChange={(e) => onChange(e.target.value)}
            placeholder={placeholder}
            value={value}
            disabled={disabled}
            min={min}
            max={max}
            step={step}
          />
        </div>
      </div>
    </div>
  );
};

export default RotationInput;
