// src/App.jsx

function Cart({ itemCount }) {
  return (
    <div>
      {itemCount === 0 && <p>Your cart is empty</p>}
      {itemCount > 0 && <p>You have {itemCount} item(s) in your cart</p>}
    </div>
  );
}

function App() {
  return (
    <div>
      <Cart itemCount={0} />
      <Cart itemCount={3} />
    </div>
  );
}

export default App;

/*
  Notes:
  - Using itemCount === 0 and itemCount > 0 (explicit comparisons)
    instead of itemCount && ... avoids the classic bug where a plain
    0 would render on screen on its own.
  - Only one of the two <p> elements ever actually renders for a
    given itemCount, since the two conditions are mutually exclusive.
*/