import React, { StrictMode, useState, useDeferredValue, useTransition } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

const SearchList = ({ items, filter }) => {
  // Heavy filtering operation (simulation)
  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(filter.toLowerCase()),
  );

  return (
    <ul>
      {filteredItems.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
    </ul>
  );
};

const App = () => {
  const [inputValue, setInputValue] = useState("");

  // Generate large list for demonstration
  const bigList = Array(10_000)
    .fill(null)
    .map((_, i) => `Item ${i + 1}`);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Search..."
      />

      <SearchList items={bigList} filter={inputValue} />
    </div>
  );
}

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);