🎁 Props & Children: Component Communication Mastery

// Parent component passing props
function App() {
  const user = {
    name: "Sarah Chen",
    email: "sarah@example.com",
    avatar: "avatar.jpg",
    isOnline: true,
  };

  return (
    <div>
      {/* Passing different types of props */}
      <UserProfile
        user={user} // Object prop
        theme="dark" // String prop
        showStatus={true} // Boolean prop
        onEdit={() => console.log("Edit")} // Function prop
        maxPosts={10} // Number prop
      />
    </div>
  );
}

// Child component receiving props
function UserProfile({ user, theme, showStatus, onEdit, maxPosts }) {
  return (
    <div className={`profile profile--${theme}`}>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>

      {showStatus && (
        <span className={`status ${user.isOnline ? "online" : "offline"}`}>
          {user.isOnline ? "🟢 Online" : "⚫ Offline"}
        </span>
      )}

      <button onClick={onEdit}>Edit Profile</button>
      <p>Showing last {maxPosts} posts</p>
    </div>
  );
}

// ✅ GOOD: Destructure in function parameters
function Welcome({ name, age, city }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>
        Age: {age}, City: {city}
      </p>
    </div>
  );
}

// ❌ AVOID: Using props object directly
function WelcomeVerbose(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>
        Age: {props.age}, City: {props.city}
      </p>
    </div>
  );
}

function Button({
  children,
  variant = "primary", // Default value
  size = "medium",
  disabled = false,
  onClick = () => {}, // Default function
  ...restProps // Spread remaining props
}) {
  const baseClasses = "btn";
  const variantClass = `btn--${variant}`;
  const sizeClass = `btn--${size}`;

  return (
    <button
      className={`${baseClasses} ${variantClass} ${sizeClass}`}
      disabled={disabled}
      onClick={onClick}
      {...restProps} // Pass through any additional props
    >
      {children}
    </button>
  );
}

// Usage examples
function ButtonExamples() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button variant="secondary" size="large">
        Large Secondary
      </Button>
      <Button disabled onClick={() => alert("Clicked")}>
        Disabled Button
      </Button>
      <Button type="submit" form="myForm">
        {" "}
        {/* type and form passed via ...restProps */}
        Submit
      </Button>
    </div>
  );
}

function UserCard({
  user: {
    name,
    email,
    profile: { bio, location, website } = {}, // Default empty object
  },
  settings: { theme, notifications } = { theme: "light", notifications: true },
}) {
  return (
    <div className={`user-card user-card--${theme}`}>
      <h3>{name}</h3>
      <p>{email}</p>
      {bio && <p className="bio">{bio}</p>}
      {location && <p>📍 {location}</p>}
      {website && <a href={website}>🌐 Website</a>}

      {notifications && <div className="notification-badge">🔔</div>}
    </div>
  );
}

// Usage
const userData = {
  name: "Alex Johnson",
  email: "alex@example.com",
  profile: {
    bio: "Full-stack developer passionate about React",
    location: "San Francisco, CA",
    website: "https://alexjohnson.dev",
  },
};

const userSettings = {
  theme: "dark",
  notifications: true,
};

<UserCard user={userData} settings={userSettings} />;

// Container component that wraps children
function Card({ children, title, className = "" }) {
  return (
    <div className={`card ${className}`}>
      {title && <div className="card-header">{title}</div>}
      <div className="card-body">
        {children} {/* This is where child content goes */}
      </div>
    </div>
  );
}

// Usage - anything between <Card> tags becomes children
function App() {
  return (
    <div>
      <Card title="User Info">
        <h3>John Doe</h3>
        <p>Software Engineer</p>
        <button>Contact</button>
      </Card>

      <Card title="Statistics" className="stats-card">
        <div className="stat">
          <span className="number">1,234</span>
          <span className="label">Users</span>
        </div>
        <div className="stat">
          <span className="number">567</span>
          <span className="label">Orders</span>
        </div>
      </Card>
    </div>
  );
}

// 1. Children as a function (render props pattern)
function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  // Call children as a function, passing state
  return children({ data, loading, error });
}

// Usage
function UserList() {
  return (
    <DataFetcher url="/api/users">
      {({ data, loading, error }) => {
        if (loading) return <div>Loading users...</div>;
        if (error) return <div>Error: {error.message}</div>;

        return (
          <ul>
            {data.map((user) => (
              <li key={user.id}>{user.name}</li>
            ))}
          </ul>
        );
      }}
    </DataFetcher>
  );
}

// 2. Manipulating children with React.Children
function List({ children, ordered = false }) {
  const Tag = ordered ? "ol" : "ul";

  // Add props to each child
  const enhancedChildren = React.Children.map(children, (child, index) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        key: index,
        className: `${child.props.className || ""} list-item`.trim(),
      });
    }
    return child;
  });

  return <Tag className="custom-list">{enhancedChildren}</Tag>;
}

// Usage
function TodoApp() {
  return (
    <List ordered>
      <li>Learn React fundamentals</li>
      <li>Master hooks</li>
      <li>Build awesome projects</li>
    </List>
  );
}

// 3. Conditional children rendering
function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>
          ×
        </button>
        {children}
      </div>
    </div>
  );
}

// Parent manages state and passes down
function ShoppingCart() {
  const [items, setItems] = useState([
    { id: 1, name: "Laptop", price: 999, quantity: 1 },
    { id: 2, name: "Mouse", price: 25, quantity: 2 },
  ]);

  const updateQuantity = (id, newQuantity) => {
    setItems(
      items.map((item) =>
        item.id === id ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  const removeItem = (id) => {
    setItems(items.filter((item) => item.id !== id));
  };

  return (
    <div className="shopping-cart">
      <h2>Shopping Cart</h2>
      {items.map((item) => (
        <CartItem
          key={item.id}
          item={item}
          onUpdateQuantity={updateQuantity} // Function prop
          onRemove={removeItem} // Function prop
        />
      ))}
      <CartTotal items={items} /> {/* Data prop */}
    </div>
  );
}

// Child receives props and calls parent functions
function CartItem({ item, onUpdateQuantity, onRemove }) {
  const handleQuantityChange = (e) => {
    const newQuantity = parseInt(e.target.value);
    onUpdateQuantity(item.id, newQuantity);
  };

  return (
    <div className="cart-item">
      <span>{item.name}</span>
      <span>${item.price}</span>
      <input
        type="number"
        value={item.quantity}
        onChange={handleQuantityChange}
        min="1"
      />
      <button onClick={() => onRemove(item.id)}>Remove</button>
    </div>
  );
}

function CartTotal({ items }) {
  const total = items.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );

  return (
    <div className="cart-total">
      <strong>Total: ${total.toFixed(2)}</strong>
    </div>
  );
}

// ❌ PROBLEM: Prop drilling - passing props through multiple levels
function App() {
  const [user, setUser] = useState({ name: "John", theme: "dark" });

  return (
    <Layout user={user} setUser={setUser}>
      <Dashboard user={user} setUser={setUser} />
    </Layout>
  );
}

function Layout({ children, user, setUser }) {
  return (
    <div>
      <Header user={user} setUser={setUser} /> {/* Passing through */}
      <main>{children}</main>
    </div>
  );
}

function Header({ user, setUser }) {
  return (
    <header>
      <Navigation user={user} /> {/* Still passing through */}
      <UserMenu user={user} setUser={setUser} />
    </header>
  );
}

function Navigation({ user }) {
  return (
    <nav>
      <ThemeToggle user={user} /> {/* Finally used here */}
    </nav>
  );
}

function ThemeToggle({ user }) {
  // This component is 4 levels deep but needs user data!
  return <button>Current theme: {user.theme}</button>;
}

// ❌ WRONG: Never mutate props
function BadComponent({ user, items }) {
  user.name = "Modified"; // DON'T DO THIS!
  items.push({ id: 4, name: "New" }); // DON'T DO THIS!

  return <div>{user.name}</div>;
}

// ✅ CORRECT: Create new objects/arrays
function GoodComponent({ user, items }) {
  const updatedUser = { ...user, name: "Modified" };
  const updatedItems = [...items, { id: 4, name: "New" }];

  return <div>{updatedUser.name}</div>;
}

// ❌ WRONG: Passing all props when only some are needed
function OverpassingParent() {
  const massiveUserObject = {
    id: 1,
    name: "John",
    email: "john@example.com",
    preferences: {
      /* huge object */
    },
    history: {
      /* huge array */
    },
    // ... 50 more properties
  };

  return <SimpleGreeting user={massiveUserObject} />;
}

function SimpleGreeting({ user }) {
  return <h1>Hello, {user.name}!</h1>; // Only needs name!
}

// ✅ CORRECT: Pass only what's needed
function EfficientParent() {
  const user = {
    /* massive object */
  };

  return <SimpleGreeting name={user.name} />;
}

function SimpleGreeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// ❌ WRONG: Explicit true values
<Button disabled={true} loading={true} />

// ✅ CORRECT: Shorthand for true
<Button disabled loading />

// ❌ WRONG: String booleans
<Button disabled="true" />  // This is always truthy!

// ✅ CORRECT: Actual booleans
<Button disabled={isDisabled} />

// 1. RIGID: Specific, limited use cases
function UserAvatar({ user }) {
  return <img src={user.avatar} alt={user.name} className="user-avatar" />;
}

// 2. FLEXIBLE: Configurable behavior
function Avatar({
  src,
  alt,
  size = "medium",
  shape = "circle",
  fallback = "👤",
}) {
  const sizeClasses = {
    small: "w-8 h-8",
    medium: "w-12 h-12",
    large: "w-16 h-16",
  };

  return (
    <div className={`avatar avatar--${shape} ${sizeClasses[size]}`}>
      {src ? (
        <img src={src} alt={alt} />
      ) : (
        <span className="avatar-fallback">{fallback}</span>
      )}
    </div>
  );
}

// 3. HIGHLY FLEXIBLE: Composition-based
function FlexibleCard({ children, ...props }) {
  return (
    <div className="card" {...props}>
      {children}
    </div>
  );
}

// Usage shows the flexibility
function Examples() {
  return (
    <div>
      {/* Rigid - only works with user objects */}
      <UserAvatar user={currentUser} />

      {/* Flexible - works with any image data */}
      <Avatar src="profile.jpg" alt="Profile" size="large" shape="square" />

      {/* Highly flexible - can contain anything */}
      <FlexibleCard className="special" onClick={handleClick}>
        <h3>Custom Content</h3>
        <p>Any JSX can go here</p>
        <Avatar src="user.jpg" alt="User" />
      </FlexibleCard>
    </div>
  );
}

// Your solution:
function Button({ children, variant, size, loading, disabled, ...props }) {
  // Implement this component
}

// Test cases:
<Button variant="primary" size="large">Save</Button>
<Button variant="danger" loading disabled>Delete</Button>
<Button onClick={handleClick} type="submit">Submit</Button>

// Your solution:
function List({ items, renderItem, loading, emptyMessage }) {
  // Implement this component
}

// Test cases:
const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
];

<List
  items={users}
  renderItem={(user) => <div key={user.id}>{user.name}</div>}
  emptyMessage="No users found"
/>;

// ❌ RED FLAGS in interviews:

// 1. Mutating props
function Bad({ user }) {
  user.name = "Changed"; // NEVER!
  return <div>{user.name}</div>;
}

// 2. Not using destructuring
function Verbose(props) {
  return (
    <div>
      {props.user.name} - {props.user.email}
    </div>
  );
}

// 3. Inline object creation
function Inefficient() {
  return (
    <Component
      style={{ color: "red" }} // New object every render!
      data={{ items: [] }} // New object every render!
    />
  );
}

// 4. Missing key props in lists
function MissingKeys({ items }) {
  return (
    <div>
      {items.map((item) => (
        <div>{item.name}</div>
      ))}{" "}
      // No key!
    </div>
  );
}