import SliderText from '@/react/components/dev/slider-text.jsx';

import styles from './noise-field.module.css';

function NoiseField(props) {
  const {children, ...field} = props;
  return (
    <div className={styles.noiseField}>
      <input
        name="label[]"
        type="text"
        defaultValue={field.label}
      />
      <label>
        <SliderText
          name="percent[]"
          min="0"
          max="1"
          step="0.05"
          defaultValue={field.percent}
        />
        <span>%</span>
      </label>
      <div className={styles.scale}>
        <label>
          <span>x</span>
          <SliderText
            defaultValue={field.scale.x}
            max="100"
            min="0.01"
            name="scaleX[]"
            step="0.01"
          />
        </label>
        <label>
          <span>y</span>
          <SliderText
            defaultValue={field.scale.y}
            max="100"
            min="0.01"
            name="scaleY[]"
            step="0.01"
          />
        </label>
      </div>
      {children}
    </div>
  );
}

export default NoiseField;