// src/App.jsx

function Box({ children }) {
  return (
    <div style={{ border: "1px solid #999", padding: "10px", margin: "8px 0" }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Box>
        <h2>A heading</h2>
      </Box>
      <Box>
        <ul>
          <li>Item one</li>
          <li>Item two</li>
        </ul>
      </Box>
      <Box>
        <p>Just a paragraph of text.</p>
      </Box>
    </div>
  );
}

export default App;

/*
  Notes:
  - Box itself never changes between the three usages — only the
    children passed between its tags differ each time.
  - This is the core benefit of composition: one wrapper component,
    reused for completely different inner content, with the border
    styling written exactly once.
*/