// src/App.jsx
import { useState } from "react";

function ColorSwatches({ onColorSelect }) {
  const colors = ["red", "green", "blue"];

  return (
    <div>
      {colors.map((color) => (
        <button key={color} onClick={() => onColorSelect(color)}>
          {color}
        </button>
      ))}
    </div>
  );
}

function PreviewBox({ selectedColor }) {
  return (
    <div style={{ width: "100px", height: "100px", background: selectedColor || "#ccc" }} />
  );
}

function ColorPicker() {
  const [selectedColor, setSelectedColor] = useState("");

  return (
    <div>
      <ColorSwatches onColorSelect={setSelectedColor} />
      <PreviewBox selectedColor={selectedColor} />
    </div>
  );
}

function App() {
  return <ColorPicker />;
}

export default App;

/*
  Notes:
  - selectedColor lives in ColorPicker, the shared parent of both
    siblings — ColorSwatches and PreviewBox never talk to each other
    directly.
  - This combines two earlier patterns: .map() with a key (Chapter 6)
    for rendering the swatch buttons, and lifted state (this chapter)
    for keeping the preview in sync with whichever swatch was clicked.
*/