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

function NameInput({ name, onNameChange }) {
  return (
    <input
      value={name}
      onChange={(e) => onNameChange(e.target.value)}
      placeholder="Enter your name"
    />
  );
}

function NameGreeting({ name }) {
  return <p>Hello, {name || "stranger"}!</p>;
}

function Parent() {
  const [name, setName] = useState("");

  return (
    <div>
      <NameInput name={name} onNameChange={setName} />
      <NameGreeting name={name} />
    </div>
  );
}

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

export default App;

/*
  Notes:
  - name lives only in Parent — neither NameInput nor NameGreeting
    has its own copy of this state.
  - NameInput receives both the current value and a way to change it
    (onNameChange, which is really setName under a clearer prop name);
    NameGreeting only needs to read the value, so it receives just name.
*/