import React from 'react';
import { TextControl } from '@wordpress/components';

interface ProrankNumberControlProps {
  label?: string;
  value: number | string;
  onChange: (value: string) => void;
  min?: number;
  max?: number;
  step?: number;
  help?: string;
  className?: string;
}

const ProrankNumberControl: React.FC<ProrankNumberControlProps> = ({
  label,
  value,
  onChange,
  min,
  max,
  step,
  help,
  className = '',
}) => {
  return (
    <div className={`prorank-number-control ${className}`.trim()}>
      <TextControl
        type="number"
        label={label}
        value={value}
        onChange={(nextValue) => onChange(nextValue)}
        min={min}
        max={max}
        step={step}
        help={help}
      />
    </div>
  );
};

export { ProrankNumberControl };
export default ProrankNumberControl;