import { useState } from 'react';
import { useBroadcastChannel } from '@use-broadcast-channel/hooks';

const App = () => {
  const [count, setCount] = useState<number>(0);
  const { postMessage } = useBroadcastChannel<number>('test-app', (message) => {
    setCount(message);
  });

  const handleClick = () => {
    setCount((prev) => {
      const next = prev + 1;
      postMessage(next);
      return next;
    });
  };

  return (
    <div>
      <h1>Counter</h1>
      <div>
        <div>Current count: {count}</div>
        <div>
          <button onClick={handleClick}>Count</button>
        </div>
      </div>
    </div>
  );
};

export default App;