function App() {
  return (
    <UserCard 
      name="سارا" 
      age={28} 
      isOnline={true} 
      onNotify={() => alert("ارسال شد!")}
    />
  );
}

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>سن: {props.age}</p>
      <p>وضعیت: {props.isOnline ? "آنلاین 🟢" : "آفلاین 🔴"}</p>
      <button onClick={props.onNotify}>ارسال پیام</button>
    </div>
  );
}

function UserCard({ name, age, isOnline, onNotify }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>سن: {age}</p>
      <p>وضعیت: {isOnline ? "آنلاین 🟢" : "آفلاین 🔴"}</p>
      <button onClick={onNotify}>ارسال پیام</button>
    </div>
  );
}

// کامپوننت والد
function App() {
  return (
    <Card>
      <h2>عنوان کارت</h2>
      <p>توضیحات کارت اینجا قرار می‌گیرد</p>
      <button>مشاهده</button>
    </Card>
  );
}

// کامپوننت فرزند (Card)
function Card({ children }) {
  return (
    <div>
      <h1>این هم یک متن دیگر</h1>
      <div>
        {children} {/* کل محتوای داخل Card در اینجا نمایش داده می‌شود */}
      </div>
    </div>
  );
}

function Button({ label, variant = "primary" }) {
  return <button className={`btn-${variant}`}>{label}</button>;
}

npm install prop-types

import PropTypes from 'prop-types';

function UserCard({ name, age, isOnline }) {
  // ...
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired, // اجباری
  age: PropTypes.number, // اختیاری
  isOnline: PropTypes.bool,
};

const userData = { name: "احمد", age: 30, city: "تهران" };

<UserCard {...userData} />
// معادل: <UserCard name="احمد" age={30} city="تهران" />

import React from 'react';

// کامپوننت فرزند
function ProductCard({ title, price, isDiscount, children, onBuy }) {
  return (
    <div className={`product-card ${isDiscount ? "discount" : ""}`}>
      <h3>{title}</h3>
      <p>قیمت: {isDiscount ? price * 0.8 : price} تومان</p>
      {isDiscount && <span className="badge">تخفیف ویژه</span>}
      <div className="product-actions">
        {children}
        <button onClick={onBuy}>خرید</button>
      </div>
    </div>
  );
}

// کامپوننت والد
function App() {
  const handleBuy = () => alert("محصول به سبد خرید اضافه شد");

  return (
    <ProductCard 
      title="لپ‌تاپ ایسوس" 
      price={25000000} 
      isDiscount={true}
      onBuy={handleBuy}
    >
      <span>⭐ ۴.۵ ستاره</span>
    </ProductCard>
  );
}

export default App;