---

import { ChangeEvent } from 'react';

import styles from './index.module.scss';

interface RangeFieldProps {
  label: string;
  value: number;
  min?: number;
  max?: number;
  step?: number;
  onValueChange: (value: number) => void;
}

export const RangeField = ({
  label,
  value,
  min = 0,
  max = 100,
  step = 1,
  onValueChange,
}: RangeFieldProps) => {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    onValueChange(Number(event.target.value));
  };

  return (
    <label className={styles.field}>
      <span className={styles.label}>{label}</span>

      <div className={styles.range}>
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={value}
          className={styles.opacity_range}
          onChange={handleChange}
        />

        <span className={styles.range_value}>{value}%</span>
      </div>
    </label>
  );
};