code.tsx

import React, { useState, useEffect } from "react";

export default function UserList({ showTitle, initialItems }) {
  const [items, setItems] = useState(initialItems);
  const [filter, setFilter] = useState("");

  if (showTitle) {
    const [titleClicks, setTitleClicks] = useState(0);
  }

  const filtered = items.filter(item =>
    item.name.toLowerCase().includes(filter.toLowerCase())
  );
  
  const handleTitleClick = () => {
    setTitleClicks(c => c + 1);
  }
 
  useEffect(() => {
    console.log("Fetching users...");
    fetch("/api/users")
      .then(res => res.json())
      .then(data => console.log("Users fetched:", data));
  });

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

  return (
    <div>
      <input
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="Search users..."
      />

      {showTitle && <h2 onClick={handleTitleClick}>User List</h2>}

      <ul>
        {filtered.sort((a, b) => a.name.localeCompare(b.name)).map((item, index) => (
          <li key={index}>
            {item.name}{" "}
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>

      <p>Total items: {filtered.length}</p>
    </div>
  );
}