'use client';

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

export default function InvoiceReviewNotes() {
  const notes = useMap<string, string>();
  return (
    <section>
      <label>
        Invoice INV-42{' '}
        <input
          value={notes.value.get('INV-42') ?? ''}
          onChange={(event) => notes.set('INV-42', event.target.value)}
        />
      </label>
      <button onClick={() => notes.remove('INV-42')}>Remove note</button>
      <p>{notes.value.size} invoices have local notes.</p>
    </section>
  );
}