Conditional Rendering

function Welcome({ isLoggedIn }) {
  if (!isLoggedIn) {
    return (
      <div>
        <h1>Please Login</h1>
        <button>Login</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Welcome back! 👋</h1>
      <button>Logout</button>
    </div>
  );
}

// Loading states
function Profile({ status, user }) {
  if (status === "loading") return <p>Loading... ⏳</p>;
  if (status === "error")   return <p>काही error आली! ❌</p>;
  return <h1>{user.name}</h1>;
}

function UserBadge({ isPremium, name }) {
  return (
    <div>
      <h2>{name}</h2>

      {/* Ternary — दोन options मधून निवड */}
      {isPremium
        ? <span>⭐ Premium Member</span>
        : <span>Free Member</span>
      }

      {/* Inline ternary */}
      <p className={isPremium ? "text-gold" : "text-gray"}>
        {isPremium ? "All features unlocked!" : "Upgrade करा"}
      </p>
    </div>
  );
}

function ShoppingCart({ items, isLoggedIn, hasError }) {
  return (
    <div>
      {/* फक्त तेव्हाच दाखव जेव्हा true */}
      {hasError && <p className="text-red">Error आली!</p>}

      {isLoggedIn && <p>Welcome back!</p>}

      {/* items रिकामे असेल तर message दाखव */}
      {items.length === 0 && (
        <p>Cart रिकामी आहे. Shopping करा! 🛒</p>
      )}

      {/* items असतील तर count दाखव */}
      {items.length > 0 && (
        <p>{items.length} items cart मध्ये आहेत</p>
      )}
    </div>
  );
}

function App() {
  const [page, setPage] = useState("home");

  function renderPage() {
    switch (page) {
      case "home":    return <HomePage />;
      case "about":   return <AboutPage />;
      case "contact": return <ContactPage />;
      default:        return <NotFoundPage />;
    }
  }

  return (
    <div>
      <nav>
        <button onClick={() => setPage("home")}>Home</button>
        <button onClick={() => setPage("about")}>About</button>
        <button onClick={() => setPage("contact")}>Contact</button>
      </nav>
      {renderPage()}
    </div>
  );
}