'use client';

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

export default function ReportHeading() {
  const [heading, setHeading] = useState('Quarterly wins');
  const [preview, setPreview] = useState(heading);
  const update = useDebouncedCallback((text: string) => setPreview(text), 400, {
    maxWait: 1200
  });
  return (
    <section>
      <input
        aria-label="Report heading"
        value={heading}
        onChange={(event) => {
          setHeading(event.target.value);
          update(event.target.value);
        }}
      />
      <button onClick={() => update.flush()}>Preview now</button>
      <h2>{preview}</h2>
    </section>
  );
}