// src/App.jsx

function ColorButton({ color, onSelect }) {
  return (
    <button onClick={() => onSelect(color)}>
      {color}
    </button>
  );
}

function App() {
  function handleColorPicked(color) {
    console.log(`Picked: ${color}`);
  }

  return (
    <div>
      <ColorButton color="red" onSelect={handleColorPicked} />
      <ColorButton color="green" onSelect={handleColorPicked} />
      <ColorButton color="blue" onSelect={handleColorPicked} />
    </div>
  );
}

export default App;

/*
  Notes:
  - ColorButton wraps onSelect in an arrow function so it can pass its
    own color prop as the argument — onSelect(color) only runs once
    the button is actually clicked, not during render.
  - All three buttons share the same handleColorPicked function in
    App; each one just calls it with a different color value.
*/