/**
 * 02 - Props - העברת נתונים בין קומפוננטות
 * 
 * Props (קיצור של Properties) הם הדרך להעביר נתונים
 * מקומפוננטה הורה לקומפוננטה ילד.
 */

import React from 'react';

// ============================================
// Props בסיסיים
// ============================================

// קומפוננטה שמקבלת prop אחד
function Greeting({ name }) {
    return <h1>שלום, {name}!</h1>;
}

// קומפוננטה עם מספר props
function UserCard({ name, age, city }) {
    return (
        <div className="user-card">
            <h2>{name}</h2>
            <p>גיל: {age}</p>
            <p>עיר: {city}</p>
        </div>
    );
}

// ============================================
// Default Props
// ============================================

function Button({ text = "לחץ כאן", color = "blue", size = "medium" }) {
    const style = {
        backgroundColor: color,
        padding: size === "small" ? "5px 10px" : size === "large" ? "15px 30px" : "10px 20px",
        color: "white",
        border: "none",
        borderRadius: "5px",
        cursor: "pointer"
    };

    return <button style={style}>{text}</button>;
}

// ============================================
// Children Props
// ============================================

function Card({ title, children }) {
    return (
        <div className="card" style={{
            border: "1px solid #ddd",
            borderRadius: "8px",
            padding: "16px",
            margin: "10px 0"
        }}>
            <h3 style={{ borderBottom: "1px solid #eee", paddingBottom: "8px" }}>
                {title}
            </h3>
            <div className="card-content">
                {children}
            </div>
        </div>
    );
}

// ============================================
// העברת אובייקטים ומערכים
// ============================================

function ProductCard({ product }) {
    return (
        <div className="product-card">
            <h3>{product.name}</h3>
            <p>מחיר: ₪{product.price}</p>
            <p>קטגוריה: {product.category}</p>
        </div>
    );
}

function TagList({ tags }) {
    return (
        <div className="tags">
            {tags.map((tag, index) => (
                <span key={index} className="tag" style={{
                    backgroundColor: "#e0e0e0",
                    padding: "4px 8px",
                    borderRadius: "4px",
                    marginRight: "5px"
                }}>
                    {tag}
                </span>
            ))}
        </div>
    );
}

// ============================================
// העברת פונקציות כ-Props
// ============================================

function ActionButton({ onClick, label }) {
    return (
        <button onClick={onClick} style={{
            padding: "10px 20px",
            backgroundColor: "#2ecc71",
            color: "white",
            border: "none",
            borderRadius: "5px",
            cursor: "pointer"
        }}>
            {label}
        </button>
    );
}

// ============================================
// Spread Operator עם Props
// ============================================

function PersonDetails({ firstName, lastName, email, phone }) {
    return (
        <div>
            <p>שם: {firstName} {lastName}</p>
            <p>אימייל: {email}</p>
            <p>טלפון: {phone}</p>
        </div>
    );
}

// ============================================
// קומפוננטה ראשית
// ============================================

function App() {
    // נתונים לדוגמה
    const product = {
        name: "מקלדת מכנית",
        price: 350,
        category: "מחשבים"
    };

    const tags = ["React", "JavaScript", "Frontend", "Web"];

    const personProps = {
        firstName: "ישראל",
        lastName: "ישראלי",
        email: "israel@example.com",
        phone: "050-1234567"
    };

    return (
        <div className="app">
            <h1>דוגמאות Props</h1>

            {/* Props בסיסיים */}
            <section>
                <h2>Props בסיסיים</h2>
                <Greeting name="דני" />
                <Greeting name="רונית" />
            </section>

            {/* מספר Props */}
            <section>
                <h2>מספר Props</h2>
                <UserCard name="דני" age={25} city="תל אביב" />
                <UserCard name="רונית" age={30} city="ירושלים" />
            </section>

            {/* Default Props */}
            <section>
                <h2>Default Props</h2>
                <Button />
                <Button text="שמור" color="green" />
                <Button text="מחק" color="red" size="small" />
            </section>

            {/* Children Props */}
            <section>
                <h2>Children Props</h2>
                <Card title="כותרת הכרטיס">
                    <p>זה התוכן שבתוך הכרטיס!</p>
                    <p>אפשר לשים כאן כל דבר.</p>
                </Card>
            </section>

            {/* אובייקטים ומערכים */}
            <section>
                <h2>אובייקטים ומערכים</h2>
                <ProductCard product={product} />
                <TagList tags={tags} />
            </section>

            {/* פונקציות כ-Props */}
            <section>
                <h2>פונקציות כ-Props</h2>
                <ActionButton
                    label="לחץ עליי!"
                    onClick={() => alert('לחצת על הכפתור!')}
                />
            </section>

            {/* Spread Operator */}
            <section>
                <h2>Spread Operator</h2>
                <PersonDetails {...personProps} />
            </section>
        </div>
    );
}

export default App;