// Exercise 3: lifting state up
//
// Two siblings, <ColorList /> and <ColorPreview />, need to agree on which
// color is selected. Neither should own that state itself.
//
// Implement <ColorPicker />, the common parent:
//   - owns const [selected, setSelected] = useState(colors[0])
//   - renders <ColorList colors={colors} selected={selected} onSelect={setSelected} />
//   - renders <ColorPreview color={selected} />
//
// Implement <ColorList />: renders one <button> per color; clicking a color
// calls onSelect(color). Highlight the selected one somehow (e.g. a
// className) — up to you, not checked here.
//
// Implement <ColorPreview />: renders <div style={{ background: color }} />

import { useState, type ReactElement } from "react";

const colors = ["red", "green", "blue"];

type ColorListProps = { colors: string[]; selected: string; onSelect: (c: string) => void };
function ColorList({ colors, selected, onSelect }: ColorListProps): ReactElement {
  // TODO
  return <div />;
}

type ColorPreviewProps = { color: string };
function ColorPreview({ color }: ColorPreviewProps): ReactElement {
  // TODO
  return <div />;
}

function ColorPicker(): ReactElement {
  const [selected, setSelected] = useState(colors[0]);
  // TODO: wire selected/setSelected into ColorList and ColorPreview
  return <div />;
}

export default ColorPicker;

// --- self-check: do not modify below this line ---
// Structural check: clicking a ColorList button should invoke onSelect with
// that exact color — verified here without mounting a real DOM.
let selectedColor: string | null = null;
const list = ColorList({ colors, selected: "red", onSelect: (c) => (selectedColor = c) });
const buttons = (list.props as any).children;
const buttonArr = Array.isArray(buttons) ? buttons : [buttons];
const greenButton = buttonArr.find((b: any) => b?.props?.children === "green");
greenButton?.props?.onClick?.();
console.log("clicking 'green' calls onSelect('green'):", selectedColor === "green" ? "PASS" : "FAIL");

const preview = ColorPreview({ color: "blue" });
const previewOk = (preview.props as any).style?.background === "blue";
console.log("ColorPreview reflects color prop:", previewOk ? "PASS" : "FAIL");

// Visual verification: clicking any color in the list updates the preview
// box's background instantly, and the state lives ONLY in ColorPicker.