function SimpleList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

function UserList() {
  const users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <strong>{user.name}</strong> - {user.email}
        </li>
      ))}
    </ul>
  );
}

Without Keys:
┌──────────────────────────────────────────────────────────┐
│  Old List        Change         New List                │
│  ┌─────────┐                   ┌─────────┐              │
│  │ Item A  │    Insert X      │ Item X  │ ← Recreated  │
│  ├─────────┤    at start      ├─────────┤              │
│  │ Item B  │                  │ Item A  │ ← Recreated  │
│  ├─────────┤                  ├─────────┤              │
│  │ Item C  │                  │ Item B  │ ← Recreated  │
│  └─────────┘                  ├─────────┤              │
│                               │ Item C  │ ← Recreated  │
│                               └─────────┘              │
│  React rebuilds EVERYTHING (O(n) operations)           │
└──────────────────────────────────────────────────────────┘

With Keys:
┌──────────────────────────────────────────────────────────┐
│  Old List        Change         New List                │
│  ┌─────────┐                   ┌─────────┐              │
│  │ key="a" │    Insert X      │ key="x" │ ← NEW        │
│  ├─────────┤    at start      ├─────────┤              │
│  │ key="b" │                  │ key="a" │ ← Moved      │
│  ├─────────┤                  ├─────────┤              │
│  │ key="c" │                  │ key="b" │ ← Moved      │
│  └─────────┘                  ├─────────┤              │
│                               │ key="c" │ ← Moved      │
│                               └─────────┘              │
│  React only INSERTS the new item (O(1) operation)      │
└──────────────────────────────────────────────────────────┘

// ✅ BEST: Database IDs
{users.map(user => <UserCard key={user.id} user={user} />)}

// ✅ GOOD: Unique identifiers in data
{products.map(product => <ProductCard key={product.sku} product={product} />)}

// ✅ OK: Generated unique IDs (when adding items)
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
  setTodos([...todos, { id: crypto.randomUUID(), text }]);
};

// ⚠️ CAUTION: Index (only for static lists that never reorder)
{staticItems.map((item, index) => <li key={index}>{item}</li>)}

// ❌ BAD: Random values
{items.map(item => <li key={Math.random()}>{item}</li>)}

// ❌ PROBLEMATIC - State gets mixed up when reordering
function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build project' }
  ]);

  const moveToTop = (id) => {
    const todo = todos.find(t => t.id === id);
    setTodos([todo, ...todos.filter(t => t.id !== id)]);
  };

  return (
    <ul>
      {todos.map((todo, index) => (
        // Using index as key - BAD when reordering!
        <TodoItem key={index} todo={todo} />
      ))}
    </ul>
  );
}

// ✅ CORRECT - Use unique ID
{todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}

function FilterableProductList() {
  const [filter, setFilter] = useState('all');
  
  const products = [
    { id: 1, name: 'iPhone', category: 'electronics', price: 999 },
    { id: 2, name: 'T-Shirt', category: 'clothing', price: 29 },
    { id: 3, name: 'MacBook', category: 'electronics', price: 1999 },
    { id: 4, name: 'Jeans', category: 'clothing', price: 79 }
  ];

  const filteredProducts = filter === 'all' 
    ? products 
    : products.filter(p => p.category === filter);

  return (
    <div>
      <div className="filters">
        <button onClick={() => setFilter('all')}>All</button>
        <button onClick={() => setFilter('electronics')}>Electronics</button>
        <button onClick={() => setFilter('clothing')}>Clothing</button>
      </div>
      
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
      
      {filteredProducts.length === 0 && (
        <p>No products match this filter.</p>
      )}
    </div>
  );
}

function SortableTable() {
  const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'asc' });
  
  const users = [
    { id: 1, name: 'Charlie', age: 30, email: 'charlie@test.com' },
    { id: 2, name: 'Alice', age: 25, email: 'alice@test.com' },
    { id: 3, name: 'Bob', age: 35, email: 'bob@test.com' }
  ];

  const sortedUsers = [...users].sort((a, b) => {
    if (a[sortConfig.key] < b[sortConfig.key]) {
      return sortConfig.direction === 'asc' ? -1 : 1;
    }
    if (a[sortConfig.key] > b[sortConfig.key]) {
      return sortConfig.direction === 'asc' ? 1 : -1;
    }
    return 0;
  });

  const handleSort = (key) => {
    setSortConfig(prev => ({
      key,
      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc'
    }));
  };

  const SortIcon = ({ column }) => {
    if (sortConfig.key !== column) return '↕️';
    return sortConfig.direction === 'asc' ? '↑' : '↓';
  };

  return (
    <table>
      <thead>
        <tr>
          <th onClick={() => handleSort('name')}>
            Name <SortIcon column="name" />
          </th>
          <th onClick={() => handleSort('age')}>
            Age <SortIcon column="age" />
          </th>
          <th onClick={() => handleSort('email')}>
            Email <SortIcon column="email" />
          </th>
        </tr>
      </thead>
      <tbody>
        {sortedUsers.map(user => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.age}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function SearchableList() {
  const [searchTerm, setSearchTerm] = useState('');
  
  const items = [
    { id: 1, title: 'React Fundamentals', tags: ['react', 'javascript'] },
    { id: 2, title: 'Node.js Basics', tags: ['node', 'javascript'] },
    { id: 3, title: 'CSS Grid Layout', tags: ['css', 'design'] },
    { id: 4, title: 'TypeScript Guide', tags: ['typescript', 'javascript'] }
  ];

  const filteredItems = items.filter(item => {
    const matchesTitle = item.title.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesTags = item.tags.some(tag => 
      tag.toLowerCase().includes(searchTerm.toLowerCase())
    );
    return matchesTitle || matchesTags;
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Search by title or tag..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      
      <p>{filteredItems.length} results found</p>
      
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>
            <strong>{item.title}</strong>
            <div className="tags">
              {item.tags.map(tag => (
                <span key={tag} className="tag">{tag}</span>
              ))}
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function CategoryList() {
  const categories = [
    {
      id: 1,
      name: 'Electronics',
      products: [
        { id: 101, name: 'Laptop' },
        { id: 102, name: 'Phone' }
      ]
    },
    {
      id: 2,
      name: 'Clothing',
      products: [
        { id: 201, name: 'T-Shirt' },
        { id: 202, name: 'Jeans' }
      ]
    }
  ];

  return (
    <div>
      {categories.map(category => (
        <div key={category.id} className="category">
          <h2>{category.name}</h2>
          <ul>
            {category.products.map(product => (
              <li key={product.id}>{product.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

function ActiveUsersList({ users }) {
  // Method 1: Filter then map (preferred)
  return (
    <ul>
      {users
        .filter(user => user.isActive)
        .map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
    </ul>
  );
}

function ConditionalList({ items }) {
  // Method 2: Return null for items to skip
  return (
    <ul>
      {items.map(item => {
        if (item.isHidden) return null;
        return <li key={item.id}>{item.name}</li>;
      })}
    </ul>
  );
}

function UserList({ users }) {
  if (users.length === 0) {
    return (
      <div className="empty-state">
        <img src="/empty.svg" alt="No users" />
        <h3>No users found</h3>
        <p>Try adjusting your search or filters.</p>
        <button>Clear filters</button>
      </div>
    );
  }

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

// ✅ Good - Extracted component
function ProductCard({ product, onAddToCart }) {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => onAddToCart(product.id)}>
        Add to Cart
      </button>
    </div>
  );
}

function ProductGrid({ products, onAddToCart }) {
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onAddToCart={onAddToCart}
        />
      ))}
    </div>
  );
}