'use client';

import { useState } from 'react';
import { useThrottledCallback } from 'use-a-hook';

export default function PreviewQuality() {
  const [value, setValue] = useState(50);
  const [preview, setPreview] = useState(50);
  const publish = useThrottledCallback((quality: number) => setPreview(quality), 100);
  return (
    <section>
      <input
        aria-label="Preview quality"
        type="range"
        value={value}
        onChange={(event) => {
          const next = Number(event.target.value);
          setValue(next);
          publish(next);
        }}
      />
      <p>Preview quality: {preview}%</p>
    </section>
  );
}