// src/App.jsx

function TrafficLight({ color }) {
  const instructions = {
    red: "Stop",
    yellow: "Slow down",
    green: "Go",
  };

  return <p>{instructions[color] ?? "Unknown signal"}</p>;
}

function App() {
  return (
    <div>
      <TrafficLight color="red" />
      <TrafficLight color="yellow" />
      <TrafficLight color="green" />
      <TrafficLight color="purple" />
    </div>
  );
}

export default App;

/*
  Notes:
  - instructions[color] looks up the matching text by key — much
    easier to extend (just add another key) than a chain of ternaries.
  - ?? "Unknown signal" only kicks in when the lookup returns
    undefined, i.e. when color isn't one of the three known keys —
    as with the "purple" example above.
*/