// پدر → فرزند
<Child name="علی" age={20} />

// فرزند
function Child(props) {
  return <p>نام: {props.name}, سن: {props.age}</p>;
}

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>شمارش: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        افزایش
      </button>
    </div>
  );
}

// قبل
<div>
  <p>آیتم ۱</p>
  <p>آیتم ۲</p>
</div>

// بعد (فقط آیتم ۳ اضافه شد)
<div>
  <p>آیتم ۱</p>
  <p>آیتم ۲</p>
  <p>آیتم ۳</p> {/* فقط این به DOM واقعی اضافه می‌شود */}
</div>

// ۱. با if ساده
function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>خوش آمدید!</h1>;
  }
  return <h1>لطفا وارد شوید.</h1>;
}

// ۲. با عملگر ternary
function Message({ hasError }) {
  return (
    <div>
      {hasError ? (
        <p className="error">خطا!</p>
      ) : (
        <p className="success">موفق!</p>
      )}
    </div>
  );
}

// ۳. با عملگر &&
function Notification({ messages }) {
  return (
    <div>
      {messages.length > 0 && (
        <p>شما {messages.length} پیام جدید دارید</p>
      )}
    </div>
  );
}

function ShoppingList() {
  const items = ['شیر', 'نان', 'تخم مرغ'];
  
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

// ❌ بدون key - React نمی‌تواند تغییرات را تشخیص دهد
items.map(item => <li>{item}</li>)

// ✅ با key - React می‌داند هر آیتم چیست
items.map((item, index) => <li key={index}>{item}</li>)
// یا بهتر:
items.map(item => <li key={item.id}>{item.name}</li>)

function Button() {
  // ۱. تعریف تابع
  function handleClick() {
    console.log('کلیک شد!');
  }
  
  // ۲. با arrow function
  const handleMouseEnter = () => {
    console.log('ماوس وارد شد');
  };
  
  return (
    <button 
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onDoubleClick={() => console.log('دابل کلیک!')}
    >
      کلیک کن
    </button>
  );
}

function ItemList() {
  const items = ['آیتم ۱', 'آیتم ۲', 'آیتم ۳'];
  
  const handleDelete = (itemName) => {
    console.log(`حذف ${itemName}`);
  };
  
  return (
    <ul>
      {items.map(item => (
        <li key={item}>
          {item}
          <button onClick={() => handleDelete(item)}>
            حذف
          </button>
        </li>
      ))}
    </ul>
  );
}

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault(); // جلوگیری از refresh صفحه
    console.log('فرم ارسال شد');
  };
  
  const handleChange = (e) => {
    console.log('مقدار جدید:', e.target.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        onChange={handleChange}
      />
      <button type="submit">ارسال</button>
    </form>
  );
}