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

function formatDays(days) {
  return days === 1 ? '1 day' : days + ' days';
}
function App() {
  const [message, setMessage] = useState('Not acknowledged');
  function acknowledge() {
    setMessage('Notice read');
  }
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <p>Loan period: {formatDays(3)}</p>
      <button onClick={acknowledge}>Acknowledge notice</button>
      <output>{message}</output>
    </main>
  );
}

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