import React, { StrictMode, useState, useRef, useLayoutEffect } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

function App() {
  const notice = useRef(null);
  const [size, setSize] = useState('Measuring');
  useLayoutEffect(() => {
    const node = notice.current;
    const measure = () =>
      setSize(
        node.getBoundingClientRect().width < 500 ? 'Compact notice' : 'Wide notice',
      );
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <section ref={notice}>
        <h2>Collection desk</h2>
        <p>Check the window before leaving home.</p>
      </section>
      <output>{size}</output>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);