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

interface RangeMark {
  value: number;
  label?: string;
}

interface ProrankRangeControlProps {
  label?: string;
  value: number;
  onChange: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  help?: string;
  marks?: RangeMark[];
  className?: string;
}

const ProrankRangeControl: React.FC<ProrankRangeControlProps> = ({
  label,
  value,
  onChange,
  min = 0,
  max = 100,
  step = 1,
  help,
  marks,
  className = '',
}) => {
  return (
    <div className={`prorank-range-control ${className}`.trim()}>
      <RangeControl
        label={label}
        value={value}
        onChange={(nextValue) => onChange(nextValue ?? value)}
        min={min}
        max={max}
        step={step}
        help={help}
        marks={marks}
      />
    </div>
  );
};

export { ProrankRangeControl };
export default ProrankRangeControl;