// src/App.jsx

function StatusLabel({ isOnline }) {
  return (
    <p style={{ color: isOnline ? "green" : "red" }}>
      {isOnline ? "Online" : "Offline"}
    </p>
  );
}

function App() {
  return (
    <div className="app">
      <StatusLabel isOnline={true} />
      <StatusLabel isOnline={false} />
    </div>
  );
}

export default App;

/*
  Notes:
  - isOnline is a boolean prop, passed with curly braces ({true} /
    {false}), not as a string.
  - The same isOnline value drives both the displayed text and the
    inline style color, via two separate ternaries.
*/