'use client';

import { useHistory } from 'use-a-hook';

export default function TitleHistory() {
  const history = useHistory({ title: 'My portfolio' }, 30);
  return (
    <section>
      <input
        aria-label="Portfolio title"
        value={history.value.title}
        onChange={(event) => history.set({ title: event.target.value })}
      />
      <button disabled={!history.canUndo} onClick={history.undo}>
        Undo
      </button>
      <button disabled={!history.canRedo} onClick={history.redo}>
        Redo
      </button>
    </section>
  );
}